Angularjs,WebAPI 搭建一个简易权限管理系统 —— Angularjs名词与概念（一）
Posted on 2017-09-13 02:44 WebEnh 阅读(402) 评论(0) 编辑 收藏 举报目录
2. 前言
Angularjs开发CRUD类型的Web系统生产力惊人，与jQuery,YUI,kissy,Extjs等前端框架区别非常大，初学者在学习的过程中容易以自己以往的经验来学习Angularjs 往往走入误区，最典型的特征是在的开发过程中，使用大量的 指令（directive） 来实现许多操作DOM的功能，从而失去了angularjs快速开发的特性，最后不得不放弃使用。此系列的文章并不会像其他介绍Angularjs技术文档一样将每个技术细节统统照顾到，而是通过实战项目先让初学者有个大概的了解，然后大家在由浅入深逐渐熟悉每一个细节。
Github Angularjs
写此博客的时候angularjs官方稳定版已经更新到 “1.4.2”，内部测试版更新到“2.0.0-alpha.30”
本篇博客使用angularjs 1.4.2 版本
angularjs 1.4.2下载地址
首先放一个招牌Demo:
<!--设置angularjs在页面上的访问域-->
<html ng-app="Yiim">
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<script src="https://files.cnblogs.com/files/Arrays/angular.min.js"></script>
<script type="text/javascript">
//声明一个私有函数域
(function () {
//创建一个app模块（你就想象成C#里面的一个类库吧）
var app = angular.module("Yiim", []);
//在app模块中创建一个"tmplController"控制器
app.controller("tmplController", ["$scope", function ($scope) {
//设置（val）变量值
$scope.val = "Google是最棒的搜索引擎。";
}]);
})()
</script>
</head>
<body>
<!--设置当前div的控制器为"tmplController"-->
<div ng-controller="tmplController">
<div>{{val}}</div>
</div>
</body>
</html>3.Angularjs名词与概念
2.1 单页Web应用（SinglePage）:
顾名思义，只使用一个页面的Web应用程序.单页面应用是指用户通过浏览器加载独立的HTML页面，Ajax加载数据页面无刷新，实现操作各种操作。
2.2 模板（template）:
这里的模板是指前端模板，在angularjs 之外已经有非常丰富的JavaScript模板引擎了，例如artTemplate，Mustache，doT.js等。
Angularjs 内置有自己的模板引擎。
通过下面的DEMO我们一起了解一下Angularjs 内置模板引擎：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>angularjs 模板解释</title>
<script src="https://files.cnblogs.com/files/Arrays/angular.min.js"></script>
<script type="text/javascript">
//声明一个私有函数域
(function () {
var app = angular.module("Yiim", []); //创建模块
app.controller("tmplController", ["$scope", function ($scope) {
//给变量val赋值
$scope.val = "Google是最好的搜索引擎";
//给变量list赋值
$scope.list = [
{ title: "博客园", url: "http://www.cnblogs.com" },
{ title: "知乎", url: "http://www.zhihu.com" },
{ title: "codeproject", url: "http://www.codeproject.com/" },
{ title: "google", url: "http://www.google.com/" }
]
//给变量hasValue赋值
$scope.hasValue = false;
}]);
})()
</script>
</head>
<body