前言

AngularJS是Google推出的一款Web应用开发框架。它提供了一系列兼容性良好并可扩展的服务，包括数据绑定、DOM操作、MVC和依赖注入等特性。

AngularJS核心知识点

指令（directive）和数据绑定(Data Binding)
模板(Module)
控制器(Controller)
路由(Route)
服务(service)
过滤器(Filter)

指令与数据绑定

AngularJS 指令是扩展的 HTML 属性，带有前缀 ng-。
常用指令：
ng-app 初始化一个 AngularJS 应用程序。
ng-init 初始化应用程序数据。
ng-model 把元素值（比如输入域的值）绑定到应用程序。
ng-repeat 对于集合中（数组中）的每个项会克隆一次 HTML 元素
除了 AngularJS 内置的指令外，我们还可以创建自定义指令,使用 .directive 函数来添加自定义的指令。

<!DOCTYPE html>
<html ng-app='myApp'>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script> 
</head>
<body>

<div ng-init="name = '欢迎学习AngularJS'">
    <p>{{name}}: <input type="text" ng-model="name"></p>
</div>


<div ng-init="quantity=1;price=5">
    <h2>价格计算器</h2>
    数量: <input type="number" ng-model="quantity">
    价格: <input type="number" ng-model="price">
    <p><b>总价:</b> {{quantity * price}}</p>
</div>

<!-- ng-repeat -->
<div ng-init="names=[
        {name:'Jani',country:'Norway'},
        {name:'Hege',country:'Sweden'},
        {name:'Kai',country:'Denmark'}]">
    <p>循环对象：</p>
    <ul>
      <li ng-repeat="x in names">
        {{ x.name + ', ' + x.country }}
      </li>
    </ul>
</div>

<!-- 自定义指令 -->
<runoob-directive></runoob-directive>
<script>
var app = angular.module("myApp", []);
app.directive("runoobDirective", function() {
    return {
        template : "<h1>我是一个自定义指令!</h1>"
    };
});
</script>

</body>
</html>

模板

AngularJs的模板指的是前端模板。AngularJS有内置的前端模板引擎，即所有页面渲染的操作都是放在浏览器端来渲染的，从而减轻服务端的压力。
AngularJs中的模板就是指带有ng-app指令的HTML代码。AngularJs发现Html页面是否需要用AngularJs模板引擎去渲染的标志就是ng-app标签。
在AngularJs中，我们写的其实也并不是纯的Html页面，而是模板，最终用户看到的Html页面（也就是视图）是通过模板渲染后的结果。

控制器

AngularJs中控制器的作用是模型和视图之间的桥梁，而AngularJs的模型对象就是scope。所以Angularjs控制器只是scope和视图之间的桥梁，它通过操作scope对象来改变视图。
关于 controller 中作用域的问题：
controller 中，如果局部 scope 和 rootScope 都存在，且有相同名字的变量，{{变量名}} 指局部变量而不是全局变量，作用域只有当前 controller；{{root.变量名}} 是全局变量，在 ng-app="" 下任何一个 controller 中都能使用。如果没有 $scope, 只有 rootScope，那么 {{变量名}} 和 {{root.变量名}} 就没区别了。

<div ng-app="myApp" ng-controller="cntoController">
    <div><textarea ng-model="val"></textarea></div>
    <div>{{val}}</div>
    <div><button ng-click="click()">重置</button></div>
    <br>

    <!-- 控制器方法 -->
    名: <input type="text" ng-model="firstName"><br>
    姓: <input type="text" ng-model="lastName"><br>
    <br>
    姓名: {{fullName()}}
</div>
<script>
// 创建模块
var myApp = angular.module("myApp", []);
myApp.controller("cntoController", ["$scope", function ($scope) {
    var defaultValue = "Learninghard 前端系列";
        $scope.val = defaultValue;
    $scope.click = function () {
        $scope.val = defaultValue;
    };

    $scope.firstName = "John";
    $scope.lastName = "Doe";
    $scope.fullName = function() {
        return $scope.firstName + " " + $scope.lastName;
    }
}]);
</script>

<body ng-app="myApp">
    <div ng-controller="myCtrl">
        {{first}}<br>  
        {{$root.first}}<br>           
        {{second}}<br>                
        {{$root.second}}<br>          
    </div>
    <div ng-controller="myCtrl2">
        {{first}}<br>                
        {{$root.first}}<br>         
        {{second}}<br>              
        {{$root.second}}            
    </div>
</body>
<script>
    var app = angular.module('myApp', []);    
    app.controller('myCtrl', function ($scope,$rootScope) {
            $scope.first = 'ctrl局部first';
            $rootScope.first = '全局first';
        });    
    app.controller('myCtrl2', function ($scope,$rootScope) {
            $scope.second = 'ctrl2局部second';
            $rootScope.second = '全局second';    
    });
</script>

路由

AngularJS 路由允许我们通过不同的 URL 访问不同的内容。
通过 AngularJS 可以实现多视图的单页 Web 应用。

<body ng-app='myApp'>
    <div><a href="#/list1">列表</a></div>
    <br />
    <div ng-view></div>
</body>
<script>
var myApp = angular.module("myApp", ['ngRoute']);
myApp.config(['$routeProvider', function($routeProvider) {
    // 路由配置
    var route = $routeProvider;
    route.when('/list1', { 
        controller: 'listController',
        templateUrl: 'route-list.html' 
    });
    route.when('/view/:id', { 
        controller: 'viewController', 
        templateUrl: 'route-view.html' 
    });
    route.when("/", { 
        redirectTo: '/list1' 
    });
    route.otherwise({ 
        redirectTo: '/list1' 
    });
}]);
</script>

服务

在 AngularJS 中，服务是一个函数或对象，可在你的 AngularJS 应用中使用。

<script>
<!-- $location获取当前页面的url -->
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $location) {
    $scope.myUrl = $location.absUrl();
});

<!-- $http服务-->
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {
    $http.get("welcome.htm").then(function (response) {
        $scope.myWelcome = response.data;
    });
});

<!--$timeout 服务 -->
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $timeout) {
  $scope.myHeader = "Hello World!";
  $timeout(function () {
      $scope.myHeader = "How are you today?";
  }, 2000);
});

<!-- 自定义服务 -->
var app = angular.module('myApp', []);
app.service('hexafy', function() {
    this.myFunc = function (x) {
        return x.toString(16);
    }
});
app.controller('myCtrl', function($scope, hexafy) {
  $scope.hex = hexafy.myFunc(255);
});

myApp.factory("service", function() {
    var list = [
        { id: 1, title: "博客园", url: "http://www.cnblogs.com" },
        { id: 2, title: "知乎", url: "http://www.zhihu.com" },
        { id: 3, title: "codeproject", url: "http://www.codeproject.com/" },
        { id: 4, title: "stackoverflow", url: "http://www.stackoverflow.com/" }
    ];
    return function(id) {
        //假如ID为无效值返回所有
        if (!id) return list;
        var t = 0;
        angular.forEach(list, function(v, i) {
            if (v.id == id) t = i;
        });
        return list[t];
    }
});
myApp.controller("listController", ["$scope", "service", function($scope, service) {
    $scope.list = service();
}]);
</script>

过滤器

过滤器可用于转换数据，常用过滤器：
uppercase 格式化字符串为大写。
lowercase 格式化字符串为小写。
currency 格式化数字为货币格式。
currency 格式化数字为货币格式。
orderBy 根据某个表达式排列数组。
filter 从数组项中选择一个子集。
自定义过滤器

<p>姓名为 {{ lastName | uppercase }}</p>

<p>姓名为 {{ lastName | lowercase }}</p>

数量: <input type="number" ng-model="quantity">
价格: <input type="number" ng-model="price">
<p>总价 = {{ (quantity * price) | currency }}</p>

<ul>
  <li ng-repeat="x in names | orderBy:'country'">
    {{ x.name + ', ' + x.country }}
  </li>
</ul>

<p>输入过滤:</p>
<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>

<div ng-app="myApp" ng-controller="myCtrl">
姓名: {{ msg | reverse }}
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.msg = "Runoob";
});
app.filter('reverse', function() { //可以注入依赖
    return function(text) {
        return text.split("").reverse().join("");
    }
});
</script>

快速掌握AngularJs

快速掌握AngularJs

前言

AngularJS核心知识点

指令与数据绑定

模板

控制器

路由

服务

过滤器