介绍
AngularJS是一个开发动态Web应用的框架。 它让你可以使用HTML作为模板语言并且可以通过扩展的HTML语法来使应用组件更加清晰和简洁。
它的创新之处在于,通过数据绑定和依赖注入减少了大量代码,而这些都在浏览器端通过JavaScript实现,能够和任何服务器端技术完美结合。
本质上AngularJS的底层就是JS,和JQuery一样封装了对JS的调用。 我们的浏览器只能识别js。
AngularJS 是一个 JavaScript 框架。它可通过 <script> 标签添加到 HTML 页面。 AngularJS 是一个 JavaScript 框架。它是一个以 JavaScript 编写的库。 AngularJS 是以一个 JavaScript 文件形式发布的,可通过 script 标签添加到网页中:
示例引入CDN
<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>
Code language: HTML, XML (xml)
各个 angular.js 版本下载: https://github.com/angular/angular.js/releases
AngularJS 扩展了HTML(常用指令介绍)
ng-app指令告诉 AngularJS,当前元素是 AngularJS 应用程序的”所有者”。ng-model指令把输入域的值绑定到应用程序变量。ng-bind指令把应用程序变量绑定到某个段落的 innerHTML。
搭建环境
由于AngularJS是前端框架,本质只需要一个WEB服务器就可以开发。 可以使用IIS、Apache等Web服务器。 这里使用VS内置的服务器,新建一个ASP.NET CORE项目。
说明:虽然是asp.net项目,但本课程和asp.net本身无关,仅仅借用VS自带web服务器。Java、PHP开发人员同样可以学习。
示例1:双向绑定 ng-app + ng-model
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div ng-app="">
<p>You Name : <input type="text" ng-model="name"></p>
<h1>Hello {{name}}</h1>
</div>
</body>
</html>
Code language: HTML, XML (xml)
AngularJS 指令
AngularJS 指令是以 ng 作为前缀的 HTML 属性。 ng-init 指令初始化 AngularJS 应用程序变量。
示例2:ng-init 初始化变量
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="~/angular.min.js"></script>
</head>
<body>
<div ng-app="" ng-init="firstName='北盟网校'">
<p>You Name : <input type="text" ng-model="name"></p>
<h1>Hello {{name}}</h1>
<h1>Hello {{firstName}}</h1>
</div>
</body>
</html>
Code language: HTML, XML (xml)
小提示:
~/angular.min.js这种路径是ASP.NET的路径写法,如果直接在浏览器打开本地html文件,需要改成相对路径,否则会找不到js文件。
Next: 表达式