Angularjs 1.5版快速入门

本文转载自查看原文 2016-03-28 14:57 7112

还是习惯markdown编辑器，原文地址：https://www.zybuluo.com/gogogodeng/note/321997

1. 初始化
2. 控制器
3. 指令
1. 指令介绍
2. 常用指令
4. 过滤器
5. 事件处理

初始化AngularJS应用

AngularJS 是一个 JavaScript 框架。它可通过标签添加到 HTML 页面。AngularJS 通过指令扩展了 HTML，且通过表达式绑定数据到 HTML。

要使用AngularJS首先要在页面头部加载(以下全部以1.50正式版为例)

<script src="http://cdn.bootcss.com/angular.js/1.5.0/angular.min.js"></script>

但是现在还是不能用的，在需要的标签上添加ng-app

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Angular JS</title>
    <script src="http://cdn.bootcss.com/angular.js/1.5.0/angular.min.js"></script>
</head>
<body>
    <div ng-app="">
         <p>名字 : <input type="text" ng-model="name"></p>
         <h1>Hello {{name}}</h1>
    </div>
</body>
</html>

标记ng-app之后就表示angularjs将在标记的标签内部开始处理（angular作用域），所以一旦要使用它，请不要忘记这个标记
可以是html中的任何标签

其中ng-model代表模型，通过标签中的{{}}双花括号，可以直接进行绑定
文本输入指令<input type="text" ng-model="name">绑定到一个叫name的模型变量。
我们在输入框输入任何字符，都会直接出现在Hello之后替换{{name}}
这就是双向绑定，在修改输入框中的值得时候，对应的name这个模型就会一起改变，从而同步到视图中

{{ expression }}括号内的内容称之为表达式
表达式可以是数字运算，字符串拼接，数组，对象，过滤器

通常我们应用的时候，我们会主动的进行初始化，就需要这样写

<script type="text/javascript">
	var app = angular.module('myapp',[]);
</script>

其中需要注意的是var app = angular.module('myapp',[]); 这里的myapp应该对应的就是我们一开始声明的ng-app='myapp'
所以代码应该改成这样

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Angular JS</title>
	<script src="http://cdn.bootcss.com/angular.js/1.5.0/angular.min.js"></script>
</head>
<body>
	<div ng-app="myApp">
	 	<p>名字 : <input type="text" ng-model="name"></p>
	 	<h1>Hello {{name}}</h1>
	</div>
	<script type="text/javascript">
		var app = angular.module('myApp',[]);
	</script>
</body>
</html>

如果有一些附加的模块，就需要写在方括号的数组中，而且要在引用angularjs核心包之后一起引用
通过这样的方式，就创建了一个angular的对象，通过对象，我们还可以创建其中很重要的控制器和指令。
所以一般一个页面就只有一个这样的angular对象。跨页面是无效的。
适合做一些SPA。

AngularJS应用引导过程有3个重要点：注入器(injector)将用于创建此应用程序的依赖注入(dependency
injection)；注入器将会创建根作用域作为我们应用模型的范围；
AngularJS将会链接根作用域中的DOM，从用ngApp标记的HTML标签开始，逐步处理DOM中指令和绑定。
一旦AngularJS应用引导完毕，它将继续侦听浏览器的HTML触发事件，如鼠标点击事件、按键事件、HTTP传入响应等改变DOM模型的事件。这类事件一旦发生，AngularJS将会自动检测变化，并作出相应的处理及更新。

AngularJS的控制器

首先看一个例子

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Angular JS</title>
	<script src="http://cdn.bootcss.com/angular.js/1.5.0/angular.min.js"></script>
</head>
<body>
	<div ng-app="myApp" ng-controller="myCtrl">
	名: <input type="text" ng-model="firstName"><br>
	姓: <input type="text" ng-model="lastName"><br>
	<br>
	姓名: {{ firstName + " " + lastName }}
	</div>
	<script type="text/javascript">
		var app = angular.module('myApp',[]);
		app.controller('myCtrl',function($scope) {
		// $scope代表作用域
		$scope.firstName = "John";
		$scope.lastName = "Doe";
		})
	</script>
</body>
</html>

ng-controller="myCtrl" 声明了一个控制器
然后通过app.controller('myCtrl',function($scope){})定义一个控制器
控制器中的$scope作用域参数，用来保存一些模型,我们创建了两个模型firstName和lastName并分别赋值，运行之后可以看到效果。$scope他自带有属性和方法，我们也可以直接为他创建（参考javascript）。
比如：

$scope.fullName = function() {

　　return $scope.firstName + " " + $scope.lastName;

}

当我们写一个数据CRUD的时候，就可以直接定义方法去操作其中的模型对象

$scope.addStore = function(){};
$scope.updateStore = function(){};
$scope.queryStore = function(){};
$scope.deleteStore = function(){};

在控制器中，还有一个参数，$rootScope(根作用域)

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Angular JS</title>
	<script src="http://cdn.bootcss.com/angular.js/1.5.0/angular.min.js"></script>
</head>
<body ng-app="myApp">
	<div  ng-controller="myCtrl">
    	名: <input type="text" ng-model="firstName"><br>
    	姓: <input type="text" ng-model="lastName"><br>
    	<br>
    	姓名: {{ firstName + " " + lastName }}
    	性别: {{ Sex }}
	</div>

	<div  ng-controller="secondCtrl">
	你的性别是: {{ Sex }}
	</div>

	<script type="text/javascript">
		var app = angular.module('myApp',[]);
		app.controller('myCtrl',function($scope, $rootScope) {
			// $scope代表作用域
			$scope.firstName = "John";
			$scope.lastName = "Doe";
			$rootScope.Sex = "女";
		});
		app.controller('secondCtrl',function($scope, $rootScope) {
		});
	</script>
</body>
</html>

$scope只能在对应得控制器中使用，而$rootScope可以在多个控制器中使用。它是存在于整个myApp中。

AngularJS的指令

angularjs的指令就是扩展html的属性，所有ng开头的都是指令。
例如：ng-app, ng-model, ng-controller, ng-repeat等等，angular全部都是靠指令来进行处理html

除了这些自带的指令之外，我们还可以进行自定义指令。

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Angular JS</title>
    <script src="http://cdn.bootcss.com/angular.js/1.5.0/angular.min.js"></script>
</head>
<body ng-app="myApp">
    
    <my-directive></my-directive>

    <script type="text/javascript">
        var app = angular.module('myApp',[]); app.directive("myDirective",function() { return { template: "<h1>我的自定义指令!</h1>" } }) </script> </body> </html>

app.directive就是定义一个指令,返回了一个模板<h1>我的自定义指令!</h1>
但是要注意的是，定义指令名称的时候，如果是这样的驼峰命名，在标签中因为是不区分大小写的，故要在前面加上一个横杠，像这样<my-directive></my-directive>

调用指令的方式有四种，分别是:

<my-directive></my-directive> 元素 E
<div my-directive></div> 属性 A
<div class="my-directive"></div> 类名 C
 注释 M

可以在定义指令的时候，设置使用的方式，默认的是EA

app.directive("myDirective",function() {
return {
restrict : "M",
// replace: true,
template: "<h1>我的自定义指令!</h1>"
}
})

其中restrict就是设置使用的方式，如果全部都要用就写成restrict : "EACM"
一般只会用EA，如果要用注释的方式，就一定要设置replace: true 进行替换，默认的replace: false，会自动在标签内部生成template

常用的一些指令

ng-repeat 遍历数据反映到视图中

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Angular JS</title>
    <script src="http://cdn.bootcss.com/angular.js/1.5.0/angular.min.js"></script>
</head>
<body ng-app="myApp">

    <div ng-controller="myCtrl">
        <ul>
            <li ng-repeat="x in items">
                {{ '第' + $index + '条数据: 有' + x.num + '个来自' + x.country + '的' + x.name }}
            </li>
        </ul>
    </div>

    <script type="text/javascript">
        var app = angular.module('myApp',[]); app.controller("myCtrl",function($scope) { $scope.items = [ { name: 'box', num: 1, country: 'Norway'}, { name: 'football', num: 2, country: 'Sweden'}, { name: 'toy', num: 3, country: 'Denmark'}, { name: 'guitar', num: 4, country: 'Germany'} ] }) </script> </body> </html>

当我们返回数据库的一些数据的时候，可以通过这个指令遍历数组
ng-repeat="x in items"items对应$scope的数组，x表示其中的一个，然后就可以把每个x的属性的值给遍历出来，其中如果需要得到数据的索引，可以使用$index。

select下拉列表的用法

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Angular JS</title>
    <script src="http://cdn.bootcss.com/angular.js/1.5.0/angular.min.js"></script>
</head>
<body ng-app="myApp">
    
    <div ng-controller="myCtrl">
        <select ng-model="selectedNames" ng-options="x for x in names"></select>
        <h1>你选择的是: {{ selectedNames }}</h1>
    </div>
    
    <script type="text/javascript">
        var app = angular.module('myApp',[]); app.controller("myCtrl",function($scope) { $scope.names = [ 'Norway','Sweden','Denmark','Germany']; }) </script> </body> </html>

这样就简单的绑定了下拉列表，虽然使用ng-repeat也可以，但是ng-repeat选择的是一个值，而ng-options可以选择一个对象。
比如我们经常用到的，就是一个key对应一个value，我们显示value，操作的是key:

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Angular JS</title>
    <script src="http://cdn.bootcss.com/angular.js/1.5.0/angular.min.js"></script>
</head>
<body ng-app="myApp">
    
    <div ng-controller="myCtrl">
        <select ng-model="selectedNames" ng-options="x.name for x in names"></select>
        <h1>你选择的是: {{ selectedNames.id }}  {{ selectedNames.name }}</h1>
    </div>
    
    <script type="text/javascript">
        var app = angular.module('myApp',[]); app.controller("myCtrl",function($scope) { $scope.names = [ { id: '0001', name: 'Norway' }, { id: '0002', name: 'Sweden' }, { id: '0003', name: 'Denmark' }, { id: '0004', name: 'Germany' } ]; }) </script> </body> </html>

for后面表示names中的一个对象x，for之前的表示下拉列表显示什么字段。
根据数据结构不同，有不同的写法。

$scope.sites = {
site01 : "Google",
site02 : "Runoob",
site03 : "Taobao"
};
<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 sites">
</select>
<h1>你选择的值是: {{selectedCar}}</h1>

ng-bind-html
可以直接将Html内容绑定

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Angular JS</title>
    <script src="http://cdn.bootcss.com/angular.js/1.5.0/angular.min.js"></script>
    <script src="http://cdn.bootcss.com/angular.js/1.5.0/angular-sanitize.min.js"></script>

</head>
<body ng-app="myApp" ng-controller="myCtrl">
    
    <p ng-bind-html="myText"></p>
    
    <script type="text/javascript">
        var app = angular.module('myApp',['ngSanitize']); app.controller("myCtrl",function($scope) { $scope.myText = "my name is <h1>John Doe</h1>"; }) </script> </body> </html>

需要注意的是，必须引用ngSanitize模块，如果是1.3的版本可以使用<div ng-bind-html-unsafe="expression"></div>这样的方式
ngSanitize可以检测html代码的安全性

ng-checked

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Angular JS</title>
    <script src="http://cdn.bootcss.com/angular.js/1.5.0/angular.min.js"></script>

</head>
<body ng-app="myApp">
    
    <input type="checkbox" ng-model="all"> Check all<br><br>
    <input type="checkbox" ng-checked="all">Volvo<br>
    <input type="checkbox" ng-checked="all">Ford<br>
    <input type="checkbox" ng-checked="all">Mercedes
    
    <script type="text/javascript">
        var app = angular.module('myApp',['']); </script> </body> </html>

<input type="checkbox|radio" ng-checked="expression"></input>

ng-change

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Angular JS</title>
    <script src="http://cdn.bootcss.com/angular.js/1.5.0/angular.min.js"></script>

</head>
<body ng-app="myApp" ng-controller="myCtrl">
    
    <input type="text" ng-change="myFunc()" ng-model="myValue" />
    <p>The input field has changed {{count}} times.</p>
    
    <script type="text/javascript">
        var app = angular.module('myApp',[]); app.controller("myCtrl",function($scope) { $scope.count = 0; $scope.myFunc = function() { $scope.count++; }; }) </script> </body> </html>

ng-hide和ng-show

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Angular JS</title>
    <script src="http://cdn.bootcss.com/angular.js/1.5.0/angular.min.js"></script>

</head>
<body ng-app="myApp">
    
    <div>
        隐藏 HTML: <input type="checkbox" ng-model="myVar1">
        <div ng-hide="myVar1">
        <h1>Welcome 隐藏</h1>
        <p>Welcome to my home.</p>
        </div>
    </div>
    
    <div> 显示 HTML: <input type="checkbox" ng-model="myVar2"> <div ng-show="myVar2"> <h1>Welcome 显示</h1> <p>Welcome to my home.</p> </div> </div> <script type="text/javascript"> var app = angular.module('myApp',[]); </script> </body> </html>

ng-class
通过绑定模型来同步修改css

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Angular JS</title>
    <script src="http://cdn.bootcss.com/angular.js/1.5.0/angular.min.js"></script>
    <style>
        .sky {
            color:white; background-color:lightblue; padding:20px; font-family:"Courier New"; } .tomato { background-color:coral; padding:20px; font-family:Verdana; } </style> </head> <body ng-app="myApp"> <select ng-model="home"> <option value="sky">Sky</option> <option value="tomato">Tomato</option> </select> <div ng-class="home"> <h1>Welcome Home!</h1> <p>I like it!</p> </div> <script type="text/javascript"> var app = angular.module('myApp',[]); </script> </body> </html>

ng-if

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Angular JS</title>
<script src="http://cdn.bootcss.com/angular.js/1.5.0/angular.min.js"></script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">

<input type="checkbox" ng-model="myVar" ng-init="myVar = true">
<div ng-if="myVar">
<h1>Welcome</h1>
<p>Welcome to my home.</p>
<hr>
</div>

<script type="text/javascript">
var app = angular.module('myApp',[]); app.controller('myCtrl',function($scope) { }) </script> </body> </html>

`ng-if="expression"`可用表达式

ng-href

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Angular JS</title>
<script src="http://cdn.bootcss.com/angular.js/1.5.0/angular.min.js"></script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">

<div ng-init="myVar = 'http://www.itravac.com'">
<h1>想去旅游？</h1>
<p>访问 <a ng-href="{{myVar}}">{{myVar}}</a> 出发!</p>
</div>

<script type="text/javascript">
var app = angular.module('myApp',[]); app.controller('myCtrl',function($scope) { }) </script> </body> </html>

AngularJS的过滤器

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

过滤器可以通过一个管道字符（|）和一个过滤器添加到表达式中。

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Angular JS</title>
    <script src="http://cdn.bootcss.com/angular.js/1.5.0/angular.min.js"></script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
    
    <!-- 大写 -->
    <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><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> <script type="text/javascript"> var app = angular.module('myApp',[]); app.controller('myCtrl',function($scope) { $scope.lastName = "john doe"; $scope.names = [ { name: 'box', num: 1, country: 'Norway'}, { name: 'football', num: 2, country: 'Sweden'}, { name: 'toy', num: 3, country: 'Denmark'}, { name: 'guitar', num: 4, country: 'Germany'} ]; }) </script> </body> </html>

AngularJS的事件处理

ng-click (ng-hide,ng-show,ng-change等)

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Angular JS</title>
    <script src="http://cdn.bootcss.com/angular.js/1.5.0/angular.min.js"></script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
    
    <button ng-click="clickme()">点我！</button>
    <p>{{ count }}</p>

    <script type="text/javascript">
        var app = angular.module('myApp',[]); app.controller('myCtrl',function($scope) { $scope.count = 0; $scope.clickme = function() { $scope.count += 1; } }) </script> </body> </html>

免责声明！

本站转载的文章为个人学习借鉴使用，本站对版权不负任何法律责任。如果侵犯了您的隐私权益，请联系本站邮箱yoyou2525@163.com删除。

猜您在找 AngularJS - 快速入门 AngularJS快速入门指南20：快速参考 AngularJS快速入门指南11：事件 AngularJS快速入门指南13：表单 AngularJS快速入门指南16：Bootstrap AngularJS快速入门指南06：过滤器 puppeteer （Nodejs版selenium ）快速入门 Robot Framework 快速入门_中文版快速入门：github发布windows版怎么样快速学习AngularJS？