初识Angularjs框架

angularjs简介

Angularjs是GOOGLE工程师研发的一款开发源代码JavaScript框架，官方文档中的描述是：完全使用JavaScript编写客户端的技术，同其他历史悠久的Web前端技术配合使用，使得WEB开发变得更简单更高效，它是一款比较有特色的框架，和其他知名度较高的前端框架如JQuery，dojo等有些不同，angularjs以HTML作为模板语言并拓展HTML元素及属性，使得应用组件开发保持高度清晰、一致。

搭建AngularJS开发框架

我选择使用visual studio code编写，访问https://code.angularjs.org/下载了AngularJS的1.5.9版本，并从visual studio code中安装了如下插件

Debugger for Chrome: 必需插件！！用来调试的，后边调试环节详细介绍
Angular 2,4 and upcoming latest TypeScript HTML Snippets: 支持Angular2.0+的特性及语法
Path Intellisense: 自动路径补全
npm Intellisense: 支持在代码中导入npm模块（require方法）时的自动补全
Auto Close Tag: 输入开始标签后，自动添加结束标签
Auto Rename Tag: 修改html标签时，自动帮你完成尾部闭合标签的同步修改
HTML Snippets：提供对HTML语言的支持
HTML CSS Support：让 html 标签上写class 智能提示当前项目所支持的样式
Bracket Pair Colorizer:给括号加上不同的颜色，便于匹配
vscode-icons：给各种文件都加上图标
TSLint：TS语法检测

beautify : 可以格式化JSON|JS|HTML|CSS|SCSS,比内置格式化好用

第一个Helloworld

代码当中np-app是angularjs的一个内置指令，可以出现在任意位置，并有两个作用，一个启动angularjs框架，另外是告诉angularjs框架从ng-app指令所在标签的开始标签到结束标签之间的所有DOM元素由angularjs框架进行管理

{{}}是angularjs的表达式形式，由两个嵌套的大括号组成，大括号中间为表达式内容。angularjs会对表达式内容进行解析，并把表达式结果输出到游览器

angularjs应用构成元素

模型：展示到页面的数据，本质是一个JavaScript对象

视图：从用户的角度就是用户所看到的网页内容；从angularjs角度是angularjs指令与表达式经过解析后的DOM元素

控制器：angularjs应用中用于处理业务逻辑的JavaScript方法

作用域：可以理解为一个容器，在控制器中可以访问这个容器，然后往容器中放入一些模型数据，在视图中就可以通过表达式将数据展现给用户。

指令：扩展的HTML属性或标签，能够被angularjs框架识别，根据不同的指令执行相应的动作。

表达式：用于向页面输出信息

模板：angularjs以html作为模板语言，angularjs模板实际上就是html片段

angularjs表达式

表达式的定义方式{{expression}}

<!doctype html>

<html ng-app>
 <head>
 <meta charset="utf-8">
 <title>expression</title>
 <script src="e:/angular-1.5.9/angular.js">
 </script>
 </head>
 <body>
 <div>1+2={{1+2}}</div>
 <div>5-3={{5-3}}</div>
 <div>5*3={{5*3}}</div>
 <div>10/2={{10/2}}</div>
 <div>"hello"+"world"={{"hello"+"world"}}</div>
 <div>1||0={{1||0}}</div>
 </body>

</html>

初识Angularjs框架 ,

结果可见angularjs表达式支持加减乘除运算，字符串拼接运算，逻辑运算

表达式与作用域：

<!doctype html>

<html ng-app>
 <head>
 <meta charset="utf-8">
 <title>expressionscope</title>
 <script src="e:/angular-1.5.9/angular.js">
 </script>
 </head>
 <body ng-init="person={'name':'jane'};arr=['angularjs','jquery','dojo']">
 <div>{{person.name}}</div>
 <div>{{arr[0]}}</div>
 </body>

</html>

初识Angularjs框架

在上面代码里ng-init用于初始化作用域，通过ng-init指令向作用域中增加一个person对象和arr数组，然后通过表达式输出person对象的name属性和arr数组的第一个元素

相关推荐