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

Login or create a free account at codepen.io

Hello AngularJS World

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>

Course Outline: AngularJS Fundamentals

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</a>

Module 1 Intro to Angular

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

Simple Dependency Injection & Constants

Lab Time!

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

Lab 1 Solution

https://davidmarsland.github.io/edX-dev220x-angularjs-demarsland/Mod1Lab/

Lab 2 Solution

https://davidmarsland.github.io/edX-dev220x-angularjs-demarsland/Mod2Lab/

Lab 3 Solution

https://davidmarsland.github.io/edX-dev220x-angularjs-demarsland/Mod3Lab/

Lab 3 Self Solution

https://davidmarsland.github.io/edX-dev220x-angularjs-demarsland/Mod3LabSelf/

Lab 4 Solutions

https://davidmarsland.github.io/edX-dev220x-angularjs-demarsland/Mod4LabPart4GitHubService/

Lab 5 Forms Solutions

https://davidmarsland.github.io/edX-dev220x-angularjs-demarsland/Mod5LabPart6FormService/

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</a>

Factory Provider Services Slides from Microsoft Virtual Academy

Custom Directives Slides from Microsoft Virtual Academy

Custom Directives by Bruno Scopelliti

Routes for Deep-linking Single Page Apps and UI-Router

Advanced Labs Module 1 Factories and Sessions

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</a>

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

or

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

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

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 ``` Learn more about Angm Generator —

Intro to AngularJS vs Angular 4

Comparison AngularJS vs Angular2 vs Angular4

Component Based AngularJS 1.5 WebApp

Converting AngularJS App to Angular4: ng-book

Other AngularJS Learning Resources

Excellent CodeSchool Free AngularJS Course

PluralSight AngularJS Skills Assessment

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

https://www.pluralsight.com/paths/angular-js

Congratulations

You are now all AngularJS Developers!


https://davidmarsland.github.io/core-angularjs/