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数字

<divng-app=""ng-init="quantity=1;cost=5">

AngularJS字符串(在javaScript中"'"\""")都可以表示字符串的包围。

AngularJS字符串就像JavaScript字符串：

<divng-app=""ng-init="firstName='John';lastName='Doe'">

AngularJS对象

AngularJS对象就像JavaScript对象

<divng-app=""ng-init="person={firstName:'John',lastName:'Doe'}">

AngularJS数组

AngularJS数组就像JavaScript数组

<divng-app=""ng-init="points=[1,15,19,2,40]">

AngularJS应用

ng-app指令定义了应用。（应用程序的作用范围）

ng-controller定义了控制器。（控制器的作用范围）

AngularJSScope(作用域)(就是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>

AngularJSSelect(选择框)

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>

AngularJSng-if指令

ng-if指令用于在表达式为false时移除HTML元素。

如果if语句执行的结果为true，会添加移除元素，并显示。

ng-if指令不同于ng-hide，ng-hide隐藏元素，而ng-if是从DOM中移除元素。

AngularJSHTMLDOM

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>

AngularJSAPI

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>

AngularJSBootstrap

手动启动AngularJS

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

AngularJS基础

相关推荐