davidmarsland/core-angularjs

Core AngularJS Training

Instructor: David Marsland

https://www.linkedin.com/in/davidemarsland
https://davidmarsland.github.io/core-angularjs/

Codepen.io

Codepen is a great tool for interactively trying and sharing AngularJS code

Hello AngularJS World

iframe may prompt to login or register @ codepen.io
Register & login, then refresh, choose Fork

Next we'll add a Controller

<html ng-app="appHello">
  <body ng-controller="HelloController">
  // ...
    <script type="text/javascript">
        angular.module('appHello',[])
          .controller('HelloController',
            function ($scope) {
              $scope.message="Mars!"
            }
        );
    </script>
  </body>

Online Course Materials and Labs

Follow this Link, Create a Login and Register for Free Audit Access to these Excellent EdX Course Materials:

EdX: DEV220x AngularJS: Fundamentals

https://courses.edx.org/courses/course-v1:Microsoft+DEV220x+4T2017/course/

Advanced Course Materials and Labs

Follow this Link and Register for Free Audit Access to these Excellent EdX Advanced Course Materials
(Wait till we start Advanced Section on Wednesday):

EdX: DEV221x AngularJS: Advanced

https://www.edx.org/course/angularjs-advanced-framework-techniques-microsoft-dev221x-2

Module 1 Intro to Angular

What is Angular?
Angular Evolution
Architecture basics
Starter Code
Binding, Modules, Controllers, Directives

### MVA Intro to Angular Slides

EdX: DEV220x AngularJS: Fundamentals Course Overview

EdX: DEV220x Module 1: Getting Started with Angular - Resource Content: Getting Started with Angular - History of Angular

Simple Controller

Lab Time!

Module 1: Getting Started with Angular - Module Labs: Overview and Required Configuration - Labs Overview

Setup
Bootstrapping
Modules
Dependency Injection

Errors on form submit

Force error by changing password to passwordx

<input type="password" name="password" class="form-control" ng-model="model.passwordx" required>
<div class="alert alert-danger" ng-show="(form.password.$touched || form.$submitted) && form.passwordx.$error.required">

$scope.submit = submit;
function submit(model) {
  registration.submit(model).$promise
    .then(function (response) {
        alert('success');
    },
    function (response) {
      alert('error:' + response.status + ' ' + response.data.error);
      console.log('error:' + response.status + ' ' + response.data.error);
      console.log(response);
    });
    alert('Submitted\n' + JSON.stringify(model));
}

Advanced Course Materials and Labs

Follow this Link and Register for Free Audit Access to these Excellent EdX Advanced Course Materials
(Wait till we start Advanced Section on Wednesday):

EdX: DEV221x AngularJS: Advanced

https://www.edx.org/course/angularjs-advanced-framework-techniques-microsoft-dev221x-2

Factory Provider Services Slides from Microsoft Virtual Academy

Custom Directives Slides from Microsoft Virtual Academy

Custom Directives by Bruno Scopelliti

Advanced Labs Module 2 Custom Directives

Warning! Starter Code has wrong case for LabController.js, should be labController.js

Fails on case sensitive servers like linux apache

Advanced Labs Module 2 Custom Directives Continued

Mod2LabPart5DirectiveLinkRepeatScopes

Module 3: Bootstrap and ngAnimation Labs

Progressive Web Apps <a target="_ref"href="https://developers.google.com/web/fundamentals/codelabs/your-first-pwapp/">Your First Progressive Web App

Tools

Lite-server with live reload, extends Browsersync

npm install -g lite-server

Browsersync Synchronized browser testing

Grunt, The JavaScript Task Runner

npm install -g grunt-cli

Module 4, 5, and 6 labs all need to be run locally

node app.js

node server.js

Module 6 Testing Labs

Bug in Mod 6 Testing labs, need to change from http: to https:

Should fail in tests

// $http.get('http://reqres.in/api/users').then(function(result){
$http.get('https://reqres.in/api/users').then(function(result){
    deferred.resolve(result.data.data);
});

Other Module 6 Testing Issues

npm install jasmine-core -g

Solutions for AngularJS Fundamentals and Advanced courses

Clone or download zip from these GitHub Repos:

https://github.com/davidmarsland/edX-dev220x-angularjs-demarsland

https://github.com/davidmarsland/edX-dev221x-angularjs-adv-demarsland

Advanced Topics

Restangular RestAngular Demo
RestAngular on Angular: ng-newsletter
Messaging
Best Practices with Angular AngularJS Style Guide Presentation John Papa's AngularJS Style Guide
AngularJS Packaging
AngularJS Design Patterns ** ModelViewWhatever ** Controller-as-syntax ** Service Decorator
Secure Coding with AngularJS
Controlling Node npm Security Risks
Github Security Vulnerability Alerts

AngularJS with ASP.NET Core

Using AngularJS for Single Page Applications (SPAs) with ASP.NET Core

### App Generator using Yeoman # DANGER, relies on old npm packages which github reports vulnerabilities in Snyk.io Angular Vulnerabilities AngularJS Yeoman Generator Angm Generator

Install Bower and bower-installer

npm install -g bower
npm install -g bower-installer

Install yo (Yeoman)

npm install -g yo

npm install -g generator-angm


---

### Generating an application: 
* Launch angm, prompts for options

yo angm


* Running project on development

grunt dev

* Running project on production

grunt build

<a target="_ref" href="https://www.npmjs.com/package/generator-angm">Learn more about Angm Generator</a>
---

### Intro to AngularJS vs Angular 4

<a target="_ref" href="https://www.angularminds.com/blog/article/comparison-difference-between-angular1-vs-angular2-vs-angular4.html">Comparison AngularJS vs Angular2 vs Angular4</a>

<a target="_ref" href="http://blog.grossman.io/angular-1-component-based-architecture-2/">Component Based AngularJS 1.5 WebApp</a>

<a target="_ref" href="https://www.ng-book.com/2/p/Converting-an-AngularJS-1.x-App-to-Angular-4/">Converting AngularJS App to Angular4: ng-book</a>

---
### Other AngularJS Learning Resources

<a target="_ref" href="https://www.codeschool.com/courses/shaping-up-with-angularjs">Excellent CodeSchool Free AngularJS Course</a>
* Great examples of Test Driven Development
* Interactive tutorials give you feedback on your code dynamically each step!

---

#### PluralSight AngularJS Skills Assessment
15 minute test of your proficiency in AngularJS.  Should be able to take once with 1 redo.

<a target="_ref" href="https://www.pluralsight.com/paths/angular-js">https://www.pluralsight.com/paths/angular-js</a>

---
### Congratulations
### You are now all AngularJS Developers!
<br>
<a target="_git_core" href="https://davidmarsland.github.io/core-angularjs/">https://davidmarsland.github.io/core-angularjs/</a>

Core AngularJS Training

Instructor: David Marsland

Codepen.io

Hello AngularJS World

Next we'll add a Controller

Online Course Materials and Labs

EdX: DEV220x AngularJS: Fundamentals

https://courses.edx.org/courses/course-v1:Microsoft+DEV220x+4T2017/course/

Advanced Course Materials and Labs

EdX: DEV221x AngularJS: Advanced

Module 1 Intro to Angular

EdX: DEV220x Module 1: Getting Started with Angular - Resource Content: Getting Started with Angular - History of Angular

Simple Controller

Lab Time!

Lab 1 Solution

Lab 2 Solution

Lab 3 Solution

Lab 3 Self Solution

Lab 4 Solutions

Lab 5 Forms Solutions

Errors on form submit

Advanced Course Materials and Labs

EdX: DEV221x AngularJS: Advanced

Factory Provider Services Slides from Microsoft Virtual Academy

Custom Directives Slides from Microsoft Virtual Academy

Custom Directives by Bruno Scopelliti

Advanced Labs Module 2 Custom Directives

Warning! Starter Code has wrong case for LabController.js, should be labController.js

Advanced Labs Module 2 Custom Directives Continued

Mod2LabPart5DirectiveLinkRepeatScopes

Tools

Module 4, 5, and 6 labs all need to be run locally

Module 6 Testing Labs

Bug in Mod 6 Testing labs, need to change from http: to https:

Should fail in tests

Other Module 6 Testing Issues

Solutions for AngularJS Fundamentals and Advanced courses

Clone or download zip from these GitHub Repos:

Advanced Topics

AngularJS with ASP.NET Core

Using AngularJS for Single Page Applications (SPAs) with ASP.NET Core

About

Languages