介绍和搭建环境

介绍

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:

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注