Just do IT --- Angular（一）

Angular

<div ng-app="myApp" ng-controller="myCtrl">
    <input type="text" ng-model="firstName"><br>
</div>
<script>
var app = angular.module('myApp', []);//AngularJS 模塊定義應用:
app.controller('myCtrl', function($scope) {//AngularJS 控制器控制應用:
    $scope.firstName= "John";
});
</script>

AngularJS控制器

1.function editController($scope, $http ,$routeParams) {

}

2.app.controller('editController', function($scope, $http ,$routeParams) {

});

Angular模塊加載

angular.module('myApp', [])
  .config(function($provide) { ...})

angular.module('myModule', []).
  value('a', 123).
  factory('a', function() { return 123; }).
  directive('directiveName', ...).
  filter('filterName', ...);

// Angular在編譯時會執行這些函數，is same as

angular.module('myModule', []).
  config(function($provide, $compileProvider, $filterProvider) {
    $provide.value('a', 123);
    $provide.factory('a', function() { return 123; });
    $compileProvider.directive('directiveName', ...);
    $filterProvider.register('filterName', ...);
});

angular.module('myApp', [])
  .run(function($rootScope, AuthService) { 
     $rootScope.$on('$routeChangeStart', function(evt, next, current) {
        // If the user is NOT logged in
        if (!AuthService.userLoggedIn()) {
            if (next.templateUrl === "login.html") {
            // Already heading to the login route so no need to redirect
            } else { $location.path('/login');}
        }
      });
  });

AngularJS指令 ng-

ng-app指令定義了應用 模塊（Module）
ng-controller 定義了控制器 控制器（Controller）
ng-model 指令用於綁定應用程序數據到 HTML 控制器(input, select, textarea)的值。
ng-bind 指令把應用程序數據綁定到 HTML 視圖。
ng-init 指令初始化 AngularJS 應用程序變量。
ng-repeat 指令會重複一個 HTML 元素：
ng-disabled 指令直接綁定應用程序數據到 HTML 的 disabled 屬性。

建立自定義的指令
E 做爲元素名使用
A 做爲屬性使用

C 做爲類名使用

M 做爲註釋使用

<runoob-directive></runoob-directive>

app.directive("runoobDirective", function() {
    return {
        restrict : "A",
        template : "<h1>自定義指令!</h1>"
    };
});

angular.module('myApp',[]).directive('zl1',[ function(){
  return {
    restrict:'AE',
    template:'thirective',
    link:function($scope,elm,attr,controller){
      console.log("這是link");
    },
    controller:function($scope,$element,$attrs){
      console.log("這是con");
    }
  };
}]).controller('Con1',['$scope',function($scope){
  $scope.name="aliceqqq";
}]);

AngularJS做用域 $scope

AngularJS 應用組成以下：
View(視圖), 即 HTML。
Model(模型), 當前視圖中可用的數據。
Controller(控制器), 即 JavaScript 函數，能夠添加或修改屬性。
$scope(做用域) 是應用在 HTML (視圖) 和 JavaScript (控制器)之間的紐帶。
$rootScope (根做用域) 可做用於整個應用中。是各個 controller 中 scope 的橋樑。用 rootscope 定義的值，能夠在各個 controller 中使用。

AngularJS控制器

AngularJS過濾器

currency 格式化數字爲貨幣格式。
filter 從數組項中選擇一個子集。
lowercase 格式化字符串爲小寫。
orderBy 根據某個表達式排列數組。
uppercase 格式化字符串爲大寫。

<p><input type="text" ng-model="test"></p>
<ul>
  <li ng-repeat="x in names | filter:test | orderBy:'country'">
    {{ (x.name | uppercase) + ', ' + x.country }}
  </li>
</ul>

AngularJS服務(Service)

$location 返回當前頁面的 URL 地址
$scope.myUrl = $location.absUrl();

$http 向服務器發送請求，應用響應服務器傳送過來的數據。

$http.get('/someUrl', config).then(successCallback, errorCallback);
$http.post('/someUrl', data, config).then(successCallback, errorCallback);

app.controller('siteCtrl', function($scope, $http) {
    $http({
        method: 'GET',
        url: 'https://www.runoob.com/try/angularjs/data/sites.php'
    }).then(function successCallback(response) {
            $scope.names = response.data.sites;
        }, function errorCallback(response) {
            // 請求失敗執行代碼
    });
  
});


app.controller('myCtrl', function($scope, $http) {
    $http.get('/api/todos')
        .success(function(data) {
            $scope.todo = data[index];  
        })
        .error(function(data) {
            console.log('Error: ' + data);
        });
});

$timeout 服務對應了 JS window.setTimeout 函數。

app.controller('myCtrl', function($scope, $timeout) {
    $scope.myHeader = "Hello World!";
    $timeout(function () {
        $scope.myHeader = "How are you today?";
    }, 2000);
});

$interval 服務對應了 JS window.setInterval 函數
app.controller('myCtrl', function($scope, $interval) {
  $scope.theTime = new Date().toLocaleTimeString();
  $interval(function () {
      $scope.theTime = new Date().toLocaleTimeString();
  }, 1000);
});

.service建立自定義服務

app.service('hexafy', function() {
    this.myFunc = function (x) {
        return x.toString(16);
    }
});
app.controller('myCtrl', function($scope, hexafy) {
  $scope.hex = hexafy.myFunc(255);
});

過濾器中，使用自定義服務

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>

<div ng-app="myApp">
在過濾器中使用服務:

<h1>{{255 | myFormat}}</h1>

</div>

<script>
var app = angular.module('myApp', []);
app.service('hexafy', function() {
    this.myFunc = function (x) {
        return x.toString(16);
    }
});
app.filter('myFormat',['hexafy', function(hexafy) {
    return function(x) {
        return hexafy.myFunc(x);
    };
}]);

</script>

</body>
</html>

$watch：持續監聽數據上的變化，更新界面

<div ng-app="myApp" ng-controller="myCtrl">
   <b>請輸入姓名：</b><br>
   <b>姓：</b><input type="text" ng-model="lastName"><br>
   <b>名：</b><input type="text" ng-model="firstName"><br>
   <h1>{{ lastName + " " + firstName }}</h1>
   <h2>{{ fullName }}</h2>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
   $scope.lastName = "";
   $scope.firstName = "";

   //監聽lastName的變化，更新fullName
   $scope.$watch('lastName', function() {
      $scope.fullName = $scope.lastName + " " + $scope.firstName;
   });

   //監聽firstName的變化，更新fullName
   $scope.$watch('firstName', function() {
      $scope.fullName = $scope.lastName + " " + $scope.firstName;
   });
});
</script>

事件

ng-click : ng-click="toggle()"
ng-hide
ng-show

包含

AngularJS 路由

AngularJS 路由容許咱們經過不一樣的 URL 訪問不一樣的內容。
經過 AngularJS 能夠實現多視圖的單頁Web應用（single page web application，SPA）。
一般咱們的URL形式爲 http://runoob.com/first/page，但在單頁Web應用中 AngularJS 經過 # + 標記 實現，例如：
http://runoob.com/#/first
1.須要 js 文件：angular-route.js
二、包含了 ngRoute 模塊做爲主應用模塊的依賴模塊。
angular.module('routingDemoApp',['ngRoute'])

三、使用 ngView 指令。

四、配置 $routeProvider，AngularJS $routeProvider 用來定義路由規則。
module.config(['$routeProvider', function($routeProvider){
$routeProvider
.when('/',{template:'這是首頁頁面'})
.when('/computers',{template:'這是電腦分類頁面'})
.when('/printers',{template:'這是打印機頁面'})
.otherwise({redirectTo:'/'});
}]);

angular 應用經常使用哪些路由庫，各自的區別是什麼？

Angular1.x 中經常使用 ngRoute 和 ui.router，還有一種爲 Angular2 設計的 new router （面向組件）。後面那個沒在實際項目中用過，就不講了。
不管是 ngRoute 仍是 ui.router，做爲框架額外的附加功能，都必須以 模塊依賴 的形式被引入。
區別
ngRoute 模塊是 Angular 自帶的路由模塊，而 ui.router 模塊是基於 ngRoute模塊開發的第三方模塊。
ui.router 是基於 state （狀態）的， ngRoute 是基於 url 的，ui.router模塊具備更強大的功能，主要體如今視圖的嵌套方面。
使用 ui.router 可以定義有明確父子關係的路由，並經過 ui-view 指令將子路由模版插入到父路由模板的

中去，從而實現視圖嵌套。而在 ngRoute 中不能這樣定義，若是同時在父子視圖中 使用了

會陷入死循環。

ngRoute

var app = angular.module('ngRouteApp', ['ngRoute']);
app.config(function($routeProvider){
    $routeProvider
        .when('/main', {
            templateUrl: "main.html",
            controller: 'MainCtrl'
        })
        .otherwise({ redirectTo: '/tabs' });
ui.router

var app = angular.module("uiRouteApp", ["ui.router"]);
app.config(function($urlRouterProvider, $stateProvider){
    $urlRouterProvider.otherwise("/index");
    $stateProvider
        .state("Main", {
            url: "/main",
            templateUrl: "main.html",
            controller: 'MainCtrl'
        })