DevelopIntelligence.com #### Monday Dec. 4th - Friday Dec. 8th 9AM-5PM https://davidmarsland.github.io/core-angularjs/
Codepen is a great tool for interactively trying and sharing AngularJS code
Login or create a free account at codepen.io
- iframe may prompt to login or register @ codepen.io
- Register & login, then refresh, choose Fork
<html ng-app="appHello">
<body ng-controller="HelloController">
// ...
<script type="text/javascript">
angular.module('appHello',[])
.controller('HelloController',
function ($scope) {
$scope.message="Mars!"
}
);
</script>
</body>
<iframe height='665' scrolling='no' title='HelloNgWorldControllerRefactor' src='//codepen.io/demarsland/pres/BmMmxo/?height=665&theme-id=0&default-tab=html,result&embed-version=2' frameborder='no' allowtransparency='true' allowfullscreen='true' style='width: 100%;'>See the Pen HelloNgWorldControllerRefactor by David Marsland (@demarsland) on CodePen. </iframe> --- ### Course Outline: AngularJS Fundamentals * Angular Quickstart * Controllers and Scope * Views and Templates with ng Expressions and Directives * Promises for Async Chaining * Forms and Validation --- ### Course Outline: Advanced AngularJS * Services and Factories * Custom Directives and DOM Manipulation * Bootstrap and ng-animation * Express Intro * Routes for deep-linking Single Page Apps * Unit Testing and End-to-end Testing --- ### Online Course Descriptions with Labs from Microsoft Virtual Academy on EdX
Follow this Link, Create a Login and Register for Free Audit Access to these Excellent EdX Course Materials:
Follow this Link and Register for Free Audit Access to these Excellent EdX Advanced Course Materials
(Wait till we start Advanced Section on Wednesday):
https://www.edx.org/course/angularjs-advanced-framework-techniques-microsoft-dev221x-2
- 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
- Setup
- Bootstrapping
- Modules
- Dependency Injection
https://davidmarsland.github.io/edX-dev220x-angularjs-demarsland/Mod1Lab/
https://davidmarsland.github.io/edX-dev220x-angularjs-demarsland/Mod2Lab/
https://davidmarsland.github.io/edX-dev220x-angularjs-demarsland/Mod3Lab/
https://davidmarsland.github.io/edX-dev220x-angularjs-demarsland/Mod3LabSelf/
https://davidmarsland.github.io/edX-dev220x-angularjs-demarsland/Mod4LabPart4GitHubService/
- Mod4LabPart0Begin
- Mod4LabPart1Promises
- Mod4LabPart2Repos
- Mod4LabPart3ReposDetails
- Mod4LabPart4GitHubService
- Mod4LabSelfGitSearchRepos
https://davidmarsland.github.io/edX-dev220x-angularjs-demarsland/Mod5LabPart6FormService/
- Mod5LabPart0Begin
- Mod5LabPart1Form
- Mod5LabPart2FormBind
- Mod5LabPart3FormRequired
- Mod5LabPart4FormSubmit
- Mod5LabPart5FormSubmitDisabled
- Mod5LabPart6FormService
- Mod5LabSelfFormValidationLogicToken
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));
}
Follow this Link and Register for Free Audit Access to these Excellent EdX Advanced Course Materials
(Wait till we start Advanced Section on Wednesday):
https://www.edx.org/course/angularjs-advanced-framework-techniques-microsoft-dev221x-2
<iframe src='https://view.officeapps.live.com/op/embed.aspx?src=https%3A%2F%2Fcp%2Dmlxprod%2Dstatic%2Emicrosoft%2Ecom%3A443%2F05778%2D1013%2Fen%2Dus%2Fcontent%2Fcontent%5Fmmblxnh1%5F3304984382%2F05052015115948%2Epptx&wdAr=1.7777777777777777' width='1186px' height='691px' frameborder='0'>This is an embedded Microsoft Office presentation, powered by Office Online.</iframe> --- <iframe src='https://view.officeapps.live.com/op/embed.aspx?src=https%3A%2F%2Fcp%2Dmlxprod%2Dstatic%2Emicrosoft%2Ecom%3A443%2F05778%2D1013%2Fen%2Dus%2Fcontent%2Fcontent%5Fgytzmmh1%5F2004984382%2F05052015115820%2Epptx&wdAr=1.7777777777777777' width='1186px' height='691px' frameborder='0'>This is an embedded Microsoft Office presentation, powered by Office Online.</iframe>
<iframe height='642' scrolling='no' title='AngularJS DirectivePlanetShop' src='//codepen.io/demarsland/pres/ZaVdPo/?height=642&theme-id=0&default-tab=js,result&embed-version=2' frameborder='no' allowtransparency='true' allowfullscreen='true' style='width: 100%;'>See the Pen AngularJS DirectivePlanetShop by David Marsland (@demarsland) on CodePen. </iframe> --- ### Routes for Deep-linking Single Page Apps and UI-Router <iframe src='https://view.officeapps.live.com/op/embed.aspx?src=https%3A%2F%2Fcp%2Dmlxprod%2Dstatic%2Emicrosoft%2Ecom%3A443%2F05778%2D1013%2Fen%2Dus%2Fcontent%2Fcontent%5Fvwmcbnh1%5F5604984382%2F05052015115855%2Epptx&wdAr=1.7777777777777777' width='1186px' height='691px' frameborder='0'>This is an embedded Microsoft Office presentation, powered by Office Online.</iframe> --- ### Advanced Labs Module 1 Factories and Sessions * Mod1LabPart1Session * Mod1LabPart2SessionFactory
Fails on case sensitive servers like linux apache
- Mod2LabPart1Start
- Mod2LabPart1StartCaseFixed
- Mod2LabPart2DirectiveScope
- Mod2LabPart2DirectiveScopeCaseFixed
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
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
node app.js
or
node server.js
// $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);
});
npm install jasmine-core -g
https://github.com/davidmarsland/edX-dev220x-angularjs-demarsland
https://github.com/davidmarsland/edX-dev221x-angularjs-adv-demarsland
-
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
### 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!
<a target="_di" href="http://developintelligence.com"><img src="http://www.developintelligence.com/sites/all/themes/diresponsive/images/Develop-Intelligence-logo-f.png">
</a>
<br>
<a target="_git_core" href="https://davidmarsland.github.io/core-angularjs/">https://davidmarsland.github.io/core-angularjs/</a>