angular入门（基础篇）

一、什么是AngularJs？

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

AngularJs使得开发现代的单页面应用程序(SPA:Single Page Applications)变得更加简单，并且其避免了js中的DOM操作，使得加载速度大大加快。

 

 

二、Angular入手模板框架搭建

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="angular.min.js"></script>
	</head>
	<body ng-app = "app" ng-controller='myVC'>
	</body>
	<script>
		var app = angular.module('app',[]).controller('myVC',function($scope){};
	</script>
</html>

AngularJS 模块（Module） 定义了 AngularJS 应用。

AngularJS 控制器（Controller） 用于控制 AngularJS 应用。

ng-app指令定义了应用,也就是angular指令有效的作用域, ng-controller 定义了控制器，一个作用域内可以定义多个控制器。

 

 

三、Angular常用指令及用法

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

ng-init 指令初始化应用程序数据：

<div ng-app="" ng-init="names=['Jani','Hege','Kai']">

</div>

　　

ng-model 指令把元素值（比如输入域的值）绑定到应用程序，{{ name }} 是通过 ng-model="name" 进行同步。

<input type="number"    ng-model="quantity">
<p>{{quantity}}</p>

　　

ng-repeat 指令会重复一个 HTML 元素：

<li ng-repeat="x in names">
      {{ x }}
</li>

　　

  .directive 函数来添加自定义的指令:

注：使用驼峰法来命名一个指令， runoobDirective, 但在使用它时需要以 - 分割, runoob-directive，返回的参数 ——template:html代码。

 

<body ng-app="myApp">

<runoob-directive></runoob-directive>

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

　

posted @ 2017-06-29 18:47  三页黎明  阅读(251)  评论(0)    收藏  举报