AngularJS.1.0快速入门
目录
1.简介
2.基本编写结构
3.基本语法及基础结构组成
1.简介
AngularJS是一个基于MVC处理模式，实现了MVVM数据双向绑定的用于开发动态web项目的框架。以其数据和展现分离、MVVM、MVC、DI等强大的特性活跃于前端开发市场，是前端敏捷开发使用的主流的必须掌握的框架之一。
AnuglarJS是前后端分离软件架构模型下，前端业务处理的解决方案！
总之，AngularJS是web前端很厉害的一种编程框架之一
常用资源社区/网站http://docs.angularjs.org
Angular官网上提供源代码、代码/官方教程/官方开发向导/API文档等
方便自主学习！
2.基本编写结构
蓝色字体标示表示与原生JS结构区别
字体加粗部分为注释
案例一：实现一个购物车中更新数据的功能
功能要求：修改购买数量，在修改的同时，商品的小计购买金额发生变化。
<!DOCTYPE html>
<html ng-app><!-- 根标签上，增加了一个ng-app属性 -->
<head>
<meta charset="UTF-8">
<title>Angular入门程序</title>
<script src="js/angular.min.js"></script> <!--引入AngularJS文件-->
</head>
<body>
<div ng-init="count=1;price=144"><!-- 增加了一个ng-init属性，属性值中定义了两个变量 -->
单价：<span>{{price}}</span><!-- 输出了一个变量的值 -->
购买数量：<input type="text" ng-model="count"><br /><!-- 将一个变量的值和输入框绑定了 -->
小计金额：{{ price * count }}<!-- 计算了结果 -->
</div>
</body>
</html>
案例一解析：
程序运行顺序：
1.从入口属性ng-app(指令)开始加载应用，并逐行编辑解释这些扩展的内容。
2.遇到input标签中的属性ng-model(指令)，就会将它的值当成一个变量进行处理
3.遇到{{}}这样的结构，就会将括号中的值当成表达式进行处理
注：{{}} 为mustache语法，通过两个大括号来包含一个表达式的结构Angular会对mustache语法进行编译并解释成可以运算的表达式进行处理
AngularJS优势：
1.数据双向绑定、基本模板指令、自定义指令、表单验证、路由操作、依赖注入、过滤器、内置服务、自定义服务、组件、模块
2.AngularJS就是因为对传统的HTML进行了功能的扩展，所以在一定程度上，实现了软件开发过程中前后端的架构级别的分离——也就是软件前后端分离架构模型。
同时将前端的内容展示、业务功能处理、数据交互有组织的进行了规划，让前端HTML更加适合如今的企业级平台的web软件开发。
3.基本语法及基础结构组成
1.结构代码组成如下：
蓝色字体标示表示与原生JS结构区别
字体加粗部分为注释
代码：
<!DOCTYPE html>
<html ng-app="myApp"> -----------》 1,2
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/angular.min.js"></script>
</head>
<body>
<div ng-controller="myCtrl" ng-init="count=1"> ------------------》 6
<!--页面输出方式一：-->
{{name}} ------------------》7
{{count}} ------------------》 8
<!--页面输出方式二：-->
<sapn ng-bind="name"></sapn>
<span ng-bind="count"></span>
</div>
<script>
var app = angular.module("myApp", []); -------------------》 3
app.controller("myCtrl", function($scope) { ---------------------------》 4
$scope.name = "jerry"; -----------------------------------------------------》5
});
</script>
</body>
</html>
注：数字1~8为程序解析顺序
1. HTML自定义属性 ng-app属性
作用：用于启动AngularJS应用程序
2. AngularJS号称模块化，组件化项目开发的框架
模块/组件：积木
根模块：通过ng-app的属性值来指定【指定的是名称】--指定了一个myApp的模块
3. 定义模块
4. 定义控制器
5. 控制器的参数$scope 是不需要传递数据的，AngularJS会自动给它赋值
$scope上可以挂在数据，用于当前控制器的范围
6. 基础语法：通过ng-controller来将控制器和对应的标签绑定
定义好了控制器的作用范围【开始标签~结束标签之间】
7.基础语法结构：
mustache语法~ 通俗的说，就是双大括号！用于输出变量的数据、进行数据的运算等等
但是mustache语法，由于加载如果缓慢的情况会出现直接将大括号打印到页面上的问题
所以通常项目开发时，使用ng-bind来代替即第二种页面输出方式
8. ng-init这个东西，主要用来在标签中初始化一些变量数据【不推荐】
扫一扫
570
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
