Example Code

Lecture 2: Why Does Code Get Complex? Lecture 5: Sharing Data With The View Through Scope Lecture 6: Implementing NameCalculator Example in AngularJS Lecture 7: What’s Behind the “Magic”: Custom HTML Attributes

Lecture 8: Dependency Injection Lecture 9: How Dependency Injection Works in Javascript

Lecture 10: Protecting Dependency Injection from Minification Lecture 11: Expressions and Interpolation

Lecture 12: Filters

Lecture 13: Creating Custom Filters

Lecture 14: Digest Cycle Lecture 15: $digest and $apply Lecture 16: 2-way, 1-way and 1-time Binding

Lecture 17: ng-repeat

Lecture 18: Filtered ng-repeat

Lecture 19: Prototypal Inheritance

Lecture 20: Custom Services

Lecture 21: Custom Services with .factory() Lecture 22: Custom Services with .provider()

Lecture 23: ng-show and ng-hide

Lecture 24: Asynchronous Behavior with Promises and $q Lecture 25: Ajax with $http Service

Lecture 26: Directives: Dynamic HTML Lecture 27: restrict Property Lecture 28: Directive’s Isolate Scope: “=” and “@” Lecture 29: Using Controllers Inside Directives Lecture 30: Directive APIs and “&” Lecture 31: Manipulating the DOM with link Lecture 32: Using Directive’s transclude to Wrap Other Elements Lecture 33: Components & Component-Based Architecture Lecture 34: AngularJS Event System Lecture 35: Modules Lecture 36: Routing Lecture 37: Routing State with Controller Lecture 38: Routing State with resolve Lecture 39: Routing State with URL Parameters Lecture 40: Routing State with Nested Views Lecture 41: Router State Transition Events Lecture 42: Form Validation Lecture 43: Testing Javascript with Jasmine Lecture 44: Testing AngularJS Controllers Lecture 45: Testing AngularJS Services and $http Lecture 46: Testing AngularJS Directives Lecture 47: Testing AngularJS Components Lecture 48: Visit With The Client Lecture 49: Non-AngularJS Website Overview Lecture 50: Restaurant Server Setup Lecture 51: Basic Structure of the Restaurant App Lecture 52: Coding Up a Loader\/Spinner Lecture 53: Coding Up $http Interceptor Lecture 54: Coding Up Menu Categories View Lecture 57: Single Category View

Lecture 01 - Why not keep things simple?

Lecture 02 - Why does code get complex?

  • How it works without AngularJS

Lecture 03 - MVVM

Lecture 04 - AngularJS installation and first AngularJS App

  • app.js

    • angular.module

    • .controller

  • index.html
    • ng-app
    • ng-controller

Lecture 05 - Sharing data with the view through $scope

  • app.js

    • $scope.name

    • $scope.sayHello

  • index.html

    ng-model

Lecture 06 - Implementing NameCalculator example

  • index.html

    • ng-keyup

Lecture 07 - What's behind the "Magic"

  • document.querySelector

Lecture 08 - Dependency Injection

Lecture 09 - How dependency injection works in Javascript

  • $scope, $filter, $injector

  • console.log

Lecture 10 - Protecting dependecy injection from minification

  • index.html

    • ng-blur

Lecture 11 - Expressions and Interpolation

  • index.html

    • ng-click

    • ng-src

Lecture 12 - Filter

  • app.js

    • $filter
  • ng内置了一些过滤器，它们是：currency(货币)、date(日期)、filter(子串匹配)、json(格式化json对象)、limitTo(限制个数)、lowercase(小写)、uppercase(大写)、number(数字)、orderBy(排序)。总共九种。

Lecture 13 - Creating custom filters

  • app.js

    • .filter

Lecture 14 - Digest Cycle

  • $scope.$$watchersCount
  • $scope.$$watchers
  • $scope.$watch

Lecture 15 - $ digest and $apply

  • How to let AngularJS know when to refresh the View items if the items are out of AngularJS's monitoring watcher scope

  • manually kick off

    • $scope.$digest

  • notice angularJS by apply function

    • $scopel.$apply

  • Use angular timeout instead of the javascript timeout

    • $timeout

Lecture 16 - 2-way, 1-way and 1-time binding

  • Best practice: limit your watchers number less than 2000 per page

  • 1-time binding: ::

Lecture 17 - ng-repeat

  • index.html

    • ng-repeat
    • item in list
    • $index

  • app.js

    • array.push

Lecture 18 - Filtered ng-repeat

  • Array filter

    • https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/Array\/filter

    • array.filter( function (value) {return true or false} );

  • AngularJS filter
    • https:\/\/docs.angularjs.org\/guide\/filter
    • <li ng-repeat="item in shoppingList | filter: search"> ...

Lecture 19 - Prototypal inheritance, scope inheritance, controller as syntax

  • prototypal

    • The original object instance becomes the prototype for the all subsequently created objects.

    • Console output

      • Object: __proto__

    • function as object

      • test the example code for more details
  • scope inheritance
  • controller as syntax
    • html
      • "xxxxxxcontroller as ctrl1"

Lecture 20 - Custom services

  • controller 会根据需要创建或销毁，所以，永久需要用到的数据，或者多个controller需要共享的数据，应该放在service中

Lecture 21 - Custom services with .factory()

  • factory 可以动态的创建 service

Lecture 22 - Custom services with .provider()

  • provider 也可以创建 service，而且在 config 中是可以注入 provider 的。这意味着你的service有机会在config中进行定义，配置，而具备很高的灵活性。

Lecture 23 - ng-if, ng-show, ng-hide

Lecture 24 - Asynchronous behavior with Promises and $q

Lecture 25 - Ajax with $http service

Lecture 26 - Directives: Dynamic HTML

Lecture 27 - Restrict Property

Lecture 28 - Directive's isolate scope "=" "@"

  • @ - 将外部 Scope 范围内的 HTML 属性，和内部 Scope 的属性进行了绑定。绑定的属性是个字符串。

  • = - 将 外部 Scope 范围内的 HTML 属性，和内部 Scope 的属性进行了绑定。绑定的属性可以是对象。

Lecture 29 - Using controllers inside directives

  • directive 可以拥有自己私有的controller，并丰富外部的 controller 。相当于对外部的 controller，针对特定的 directive 进行了一个扩展，而又不影响原有的 controller

Lecture 30 - Directive APIs and "&"

  • 相当于在内部构造了一个局部函数，去调用外部（父） scope 的函数。但参数的传递，是通过 键值对 完成的。

Lecture 31 - Manipulating the DOM with link

Lecture 32 - Using directive's transclude to wrap other elements

Lecture 33 - Components & Component-Based Architecture

  • start from AngularJS Version 1.5

  • Component is a special kind of directive

    • assume some defaults configurations (best practice)
    • Components only control their own view and data
      • never modify data or DOM outside their own scope (isolate scope)
        • Modifying creates side-effects that lead to chaos

  • Components have well-defined public API - Inputs and Outputs

    • Inputs: use '<' and '@' bindings only
    • Never change property of passed in object or array
    • Outputs: use '&' for component event callbacks
    • Pass data to callback through param map { key: val }

  • Components have well-defined lifecycle

    • $onInit
    • $onChanges
    • $postLink
    • $onDestroy

  • Application is a tree of components

    • Entire application should be comprised of components
    • Each one would have a well-defined input and output
    • 2-way data binding is minimized as much as possible

  • Implementation steps

    • app.js

      • .component
      • component controller (not required)
      • isolated scope named as $ctrl
      • binding inputs and outputs

    • component template

      • using $ctrl.xxxx as isolated scope properties
      • using binding inputs
      • using binding outputs to update to parent scope

    • parent scope html

      • Use HTML tag or attribute to to involve components just like directives
  • https:\/\/docs.angularjs.org\/guide\/component - documentation for different versions
    • version 1.5.8 vs. version 1.5.9
    • $doCheck
      • It is a hook in $degist cycle
      • Example code: Lecture33-1.5.8 *

Lecture 34 - AngularJS Event System

  • send event up the scope chain

    • $scope.$emit

  • send event down the scope chain

    • $scope.broadcast

  • $rootScope.$broadcast

  • $rootScope.$on

  • To prevent memory leak

    • de-registration function

      • cancelListener = $rootScope.$on

    • call de-registration function when destroy

      • $ctrl.$onDestroy

Lecture 35 - Modules

  • Steps to use modules

    • specify other modules as dependencies

      • angular.module('module name', []);

  • Declare module artifacts

    • angular.module('module name').controller('controller name', controllerfunction);

  • Wire in the name of the main module in html

    • <html ng-app='Main Module'> ... <\/html>

Lecture 36 - Routing

  • ngRoute vs. ui-router

  • steps to using ui-router

    • download

      • angular-ui-router.min.js

    • reference in HTML

      • <script src="lib\/angular-ui-router.min.js"><\/script>

    • place ui-view initial view placeholder

    • declare ui-router as a dependency

      • angular.module('App', ['ui.router']);

    • configure routes in .config method

    • use '$stateProvider' and '$urlRouterProvider' in routes function

  • ui-sref

  • ui-sref-active

Lecture 37 - Routing State with Controller

  • define controller right in the .state, instead of the template

    • this will make the template more flexible and reusable

Lecture 38 - Routing State with resolve

  • we can use resolve to get some dependant async data before routing to the state

    • if we cannot fetch the data successfully, we can abort to route to the state
    • if we can fetch the data successfully, the data is ready before routing to the state, the end users will feel better

Lecture 39 - Routing State with URL Parameters

  • $stateParams

Lecture 40 - Routing State with Nested Views

Lecture 41 - Router State with Transition Events

results matching ""

    No results matching ""