AngularJS基础

AngularJS基础

AngularJS 是一个 JavaScript 框架。
AngularJS 通过指令扩展了 HTML，且通过表达式绑定数据到 HTML。

工作原理：
当HTML页面加载完成之后，运行AngularJS的解析代码，将HTML页面中的AngularJS相关的标签或字段进行解析，
解析后生成相应标签或字段要求的HTML内容，之后就生成了最终的HTML页面内容了,这些内容就可以在浏览器进
行显了。

AngularJS 指令
AngularJS 指令是以 ng 作为前缀的 HTML 属性。

ng-app 指令
指令初始化一个 AngularJS 应用程序。

ng-init 指令
ng-init 指令为 AngularJS 应用程序定义了初始值。

ng-model 指令
ng-model 指令绑定 HTML 元素到应用程序数据。

ng-model 指令可以将输入域的值与 AngularJS 创建的变量绑定。
<div ng-app="myApp" ng-controller="myCtrl">
    名字: <input ng-model="name">
</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.name = "John Doe";
});
</script>

双向绑定
<div ng-app="myApp" ng-controller="myCtrl">
    名字: <input ng-model="name">
    <h1>你输入了: {{name}}</h1>
</div>

ng-repeat 指令
ng-repeat 指令对于集合中（数组中）的每个项会克隆一次 HTML 元素。

AngularJS 表达式
里面的内容为表达式指令，会被AngularJS解析器当成指令运行并得到结果。
AngularJS 表达式写在双大括号内：{{ expression }}。

AngularJS 数字
AngularJS 数字就像 JavaScript 数字
<div ng-app="" ng-init="quantity=1;cost=5">

AngularJS 字符串(在javaScript中"'"\""")都可以表示字符串的包围。
AngularJS 字符串就像 JavaScript 字符串：
<div ng-app="" ng-init="firstName='John';lastName='Doe'">

AngularJS 对象
AngularJS 对象就像 JavaScript 对象
<div ng-app="" ng-init="person={firstName:'John',lastName:'Doe'}">

AngularJS 数组
AngularJS 数组就像 JavaScript 数组
<div ng-app="" ng-init="points=[1,15,19,2,40]">

AngularJS 应用
ng-app指令定义了应用。（应用程序的作用范围）
ng-controller 定义了控制器。（控制器的作用范围）

AngularJS Scope(作用域)(就是HTML (视图)和JavaScript (控制器)中进行数据交换的对象)
Scope(作用域) 是应用在 HTML (视图) 和 JavaScript (控制器)之间的纽带。
Scope 是一个对象，有可用的方法和属性。
Scope 可应用在视图和控制器上。
Scope 作用范围就是控制器的作用域，但ng-app中有一个 $rootScope，它可以作用在 ng-app 指令包含的所有 HTML 元素中
视图中，你不需要添加 $scope 前缀, 只需要添加属性名即可，如： {{carname}}。

AngularJS 控制器(就是进行数据（model）和相关操作的处理)
AngularJS 控制器控制 AngularJS 应用程序的数据。
AngularJS 控制器是常规的 JavaScript 对象。
ng-controller 指令定义了应用程序控制器。

AngularJS 过滤器
过滤器可以使用一个管道字符（|）添加到表达式和指令中。

AngularJS 过滤器:
过滤器描述
currency 格式化数字为货币格式。
filter 从数组项中选择一个子集。
lowercase 格式化字符串为小写。
orderBy 根据某个表达式排列数组。
uppercase 格式化字符串为大写。

表达式中添加过滤器
<div ng-app="myApp" ng-controller="personCtrl">
<p>姓名为 {{ lastName | uppercase }}</p> //过滤器可以通过一个管道字符（|）和一个过滤器添加到表达式中。

向指令添加过滤器
<div ng-app="myApp" ng-controller="namesCtrl">
<ul>
  <li ng-repeat="x in names | orderBy:'country'"> //过滤器可以通过一个管道字符（|）和一个过滤器添加到指令中。
    {{ x.name + ', ' + x.country }}
  </li>
</ul>
<div>

过滤输入
<div ng-app="myApp" ng-controller="namesCtrl">
<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>

AngularJS 服务(Service)
AngularJS 中你可以创建自己的服务，或使用内建服务。
在 AngularJS 中，服务是一个函数或对象，可在你的 AngularJS 应用中使用。

内建服务:
$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) { //使用 $http 服务向服务器请求数据
        $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);
});

$interval 服务

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $interval) {
    $scope.theTime = new Date().toLocaleTimeString();
    $interval(function () {  //每两秒显示信息
        $scope.theTime = new Date().toLocaleTimeString();
    }, 1000);
});

创建自定义服务:

app.service('hexafy', function() {
    this.myFunc = function (x) {
        return x.toString(16); //自定义的的服务 hexafy 将一个数字转换为16进制数
    }
});

要使用访问自定义服务，需要在定义过滤器的时候独立添加:

app.controller('myCtrl', function($scope, hexafy) {
    $scope.hex = hexafy.myFunc(255); //自定义的的服务 hexafy 将一个数字转换为16进制数
});

过滤器中，使用自定义服务

app.filter('myFormat',['hexafy', function(hexafy) {  //在过滤器 myFormat 中使用服务 hexafy:
    return function(x) {
        return hexafy.myFunc(x);
    };
}]);

<ul>
<li ng-repeat="x in counts">{{x | myFormat}}</li> //在对象数组中获取值时你可以使用过滤器：
</ul>

AngularJS Select(选择框)
AngularJS 可以使用数组或对象创建一个下拉列表选项。
ng-option 指令来创建一个下拉列表，列表项通过对象和数组循环输出

<div ng-app="myApp" ng-controller="myCtrl">
<select ng-model="selectedName" ng-options="x for x in names"></select>
</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.names = ["Google", "Runoob", "Taobao"];
});
</script>

ng-options 与 ng-repeat
ng-repeat 有局限性,选择的值是一个字符串

$scope.sites = [
    {site : "Google", url : "http://www.google.com"},
    {site : "Runoob", url : "http://www.runoob.com"},
    {site : "Taobao", url : "http://www.taobao.com"}
];

<select ng-model="selectedSite">
<option ng-repeat="x in sites" value="{{x.url}}">{{x.site}}</option></select>

<h1>你选择的是: {{selectedSite}}</h1>

使用 ng-options 指令，选择的值是一个对象

<select ng-model="selectedSite" ng-options="x.site for x in sites"></select>

<h1>你选择的是: {{selectedSite.site}}</h1>
<p>网址为: {{selectedSite.url}}</p>

数据源为对象
$scope.cars = {
car01 : {brand : "Ford", model : "Mustang", color : "red"},
car02 : {brand : "Fiat", model : "500", color : "white"},
car03 : {brand : "Volvo", model : "XC90", color : "black"}
};

<select ng-model="selectedSite" ng-options="x for (x, y) in sites"></select>
<h1>你选择的值是: {{selectedSite}}</h1>

$scope.cars = {
car01 : {brand : "Ford", model : "Mustang", color : "red"},
car02 : {brand : "Fiat", model : "500", color : "white"},
car03 : {brand : "Volvo", model : "XC90", color : "black"}
};

<select ng-model="selectedCar" ng-options="y.brand for (x, y) in cars"></select>

子对象(对象里) for 对象 in 对象数组(或对象)

AngularJS 表格
在表格中显示数据

<div ng-app="myApp" ng-controller="customersCtrl">
<table>
  <tr ng-repeat="x in names">
    <td>{{ x.Name }}</td>
    <td>{{ x.Country }}</td>
  </tr>
</table>
</div>

显示序号 ($index)
表格显示序号可以在 <td> 中添加 $index:

<table>
  <tr ng-repeat="x in names">
    <td>{{ $index + 1 }}</td>
    <td>{{ x.Name }}</td>
    <td>{{ x.Country }}</td>
  </tr>
</table>

使用 $even 和 $odd

<table>
<tr ng-repeat="x in names">
<td ng-if="$odd" style="background-color:#f1f1f1">{{ x.Name }}</td>
<td ng-if="$even">{{ x.Name }}</td>
<td ng-if="$odd" style="background-color:#f1f1f1">{{ x.Country }}</td>
<td ng-if="$even">{{ x.Country }}</td>
</tr>
</table>

AngularJS ng-if 指令
ng-if 指令用于在表达式为 false 时移除 HTML 元素。
如果 if 语句执行的结果为 true，会添加移除元素，并显示。
ng-if 指令不同于 ng-hide， ng-hide 隐藏元素，而 ng-if 是从 DOM 中移除元素。

AngularJS HTML DOM
ng-disabled 指令
ng-disabled 指令直接绑定应用程序数据到 HTML 的 disabled 属性。

<div ng-app="" ng-init="mySwitch=true">
	<p>
		<button ng-disabled="mySwitch">点我!</button>
	</p>
	<p>
		<input type="checkbox" ng-model="mySwitch">按钮
	</p>
	<p>
		{{ mySwitch }}
	</p>
</div>

ng-show 指令
ng-show 指令隐藏或显示一个 HTML 元素。

<div ng-app="">
	<p ng-show="true">我是可见的。</p>
	<p ng-show="false">我是不可见的。</p>
</div>

ng-hide 指令
ng-hide 指令用于隐藏或显示 HTML 元素。

<div ng-app="">
	<p ng-hide="true">我是不可见的。</p>
	<p ng-hide="false">我是可见的。</p>
</div>

AngularJS 事件
ng-click 指令

ng-click 指令定义了 AngularJS 点击事件。
<div ng-app="" ng-controller="myCtrl">
<button ng-click="count = count + 1">点我！</button>
<p>{{ count }}</p>
</div>

AngularJS 模块
模块定义了一个应用程序。
模块是应用程序中不同部分的容器。(模块是应用程序里的一部分)
模块是应用控制器的容器。
控制器通常属于一个模块。(一个模块可以包含多个控制器)

<div ng-app="myApp">...</div>
<script>
var app = angular.module("myApp", []);  //通过 AngularJS 的 angular.module 函数来创建模块
</script>

AngularJS添加指令

<div ng-app="myApp" runoob-directive></div>
<script>
var app = angular.module("myApp", []);
app.directive("runoobDirective", function() {
    return {                                  //返回的是一个对象
        template : "我在指令构造器中创建!"
    };
});
</script>

AngularJS API

API			描述
angular.lowercase()	转换字符串为小写
angular.uppercase()	转换字符串为大写
angular.isString()	判断给定的对象是否为字符串，如果是返回 true。
angular.isNumber()	判断给定的对象是否为数字，如果是返回 true。

AngularJS 包含(ng-include)

<body>
	<div class="container">
		<div ng-include="'myUsers_List.htm'"></div>
		<div ng-include="'myUsers_Form.htm'"></div>
	</div>
</body>

AngularJS 依赖注入(就是服务的注入)
value注入
Value 是一个简单的 javascript 对象，用于向控制器传递值（配置阶段）。

var mainApp = angular.module("mainApp", []);// 定义一个模块

mainApp.value("defaultInput", 5);// 创建 value 对象 "defaultInput" 并传递数据
...

mainApp.controller('CalcController', function($scope, CalcService, defaultInput) {// 将 "defaultInput" 注入到控制器
   $scope.number = defaultInput;
   $scope.result = CalcService.square($scope.number);
   $scope.square = function() {
      $scope.result = CalcService.square($scope.number);
   }
});

service注入

app.service('hexafy', function() {
    this.myFunc = function (x) {
        return x.toString(16);
    }
});

factory注入
factory 是一个函数用于返回值。在 service 和 controller 需要时创建。

// 定义一个模块
var mainApp = angular.module("mainApp", []);

// 创建 factory "MathService" 用于两数的乘积 provides a method multiply to return multiplication of two numbers
mainApp.factory('MathService', function() {
   var factory = {};
   factory.multiply = function(a, b) {
      return a * b
   }
   return factory;
});

// 在 service 中注入 factory "MathService"
mainApp.service('CalcService', function(MathService){
   this.square = function(a) {
      return MathService.multiply(a,a);
   }
});

provider注入
AngularJS 中通过 provider 创建一个 service、factory等(配置阶段)
Provider 中提供了一个 factory 方法 get()，它用于返回

value/service/factory。
// 定义一个模块
var mainApp = angular.module("mainApp", []);
...

// 使用 provider 创建 service 定义一个方法用于计算两数乘积
mainApp.config(function($provide) {
   $provide.provider('MathService', function() {
      this.$get = function() {
         var factory = {};
         factory.multiply = function(a, b) {
            return a * b;
         }
         return factory;
      };
   });
});

constant注入
constant(常量)用来在配置阶段传递数值，注意这个常量在配置阶段是不可用的。

mainApp.constant("configParam", "constant value");

AngularJS 路由
AngularJS 路由允许我们通过不同的 URL 访问不同的内容。
http://runoob.com/#/first
http://runoob.com/#/second
http://runoob.com/#/third
因为 # 号之后的内容在向服务端请求时会被浏览器忽略掉。所以我们就需要在客户端实现 # 号后面内容的功能实现。
AngularJS 路由就通过 # + 标记帮助我们区分不同的逻辑页面并将不同的页面绑定到对应的控制器上。

<html>
    <head>
    	<meta charset="utf-8">
        <title>AngularJS 路由实例 - 菜鸟教程</title>
    </head>
    <body ng-app='routingDemoApp'>

        <h2>AngularJS 路由应用</h2>
        <ul>
            <li><a href="#/">首页</a></li>
            <li><a href="#/computers">电脑</a></li>
            <li><a href="#/printers">打印机</a></li>
            <li><a href="#/blabla">其他</a></li>
        </ul>

        <div ng-view></div>  // ngView 显不路由HTML页面内容位置指令
        <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
        <script src="http://apps.bdimg.com/libs/angular-route/1.3.13/angular-route.js"></script>
        <script>
            angular.module('routingDemoApp',['ngRoute'])
            .config(['$routeProvider', function($routeProvider){ //config配置路由规则（$routeProvider（路由规则））
                $routeProvider
                .when('/',{template:'这是首页页面'})        //路由设置对象
                .when('/computers',{template:'这是电脑分类页面'})
                .when('/printers',{template:'这是打印机页面'})
                .otherwise({redirectTo:'/'});
            }]);
        </script>
    </body>
</html>

AngularJS Bootstrap
手动启动 AngularJS

参考原文： http://www.runoob.com/angularjs

猜你喜欢