最近新接触了一个js框架angular,这个框架有着诸多特性,最为核心的是:MVVM、模块化、自动化双向数据绑定、语义化标签、依赖注入,以上这些全部都是属于angular特性,虽然说它的功能十分的强大,在开发中非常的实用,对于初接触者来说,要想熟练使用仍然需要一些时间来熟悉其中基础的语法规则,一些基本的用法,虽然说代码不需要死记硬背,但是对于新学习一个知识点,记住其中的一些基础概念,基本的用法,在这里不是提倡大家去背一些代码,该处谈到的熟悉指的是自己多动手去写,实在是想不起了再查看资料,尽量凭借自己的记忆去写一些代码,只有经历这样一个十分痛苦的过程,才会有所收获。
在angular中首先需要我么熟悉的就是一些指令比如说ng-app,na-repeat等等,对于这些基础性的概念没有什么捷径,唯一的捷径就是反复的练习,在我们的项目实战中
AngularJS使用了不同的方法,它尝试去补足HTML本身在构建应用方面的缺陷。AngularJS通过使用我们称为标识符(directives)的结构,让浏览器能够识别新的语法。例如:
使用双大括号{{}}语法进行数据绑定;使用DOM控制结构来实现迭代或者隐藏DOM片段;支持表单和表单的验证;能将逻辑代码关联到相关的DOM元素上;能将HTML分组成可重用的组件。
下面我将就例子而言做一个简单的分析;
<!doctype html>
<html ng-app>--------------------相当于我们js中的全局变量作用的东西,在这里使用之后整个html文档都在angular的范围之内。
<head>
<script src="angular-1.3.0.min.js"></script>--------------类似于js的引入方法
<script src="script.js"></script>
</head>
<body>
<div ng-controller="InvoiceCntl">----------------------》控制器
<b>Invoice:</b>
<br>
<br>
<table>
<tr><td>Quantity</td><td>Cost</td></tr>
<tr>
<td><input type="integer" min="0" ng-model="qty" required ></td>
<td><input type="number" ng-model="cost" required ></td>
</tr>
</table>
<hr>
<b>Total:</b> {{qty * cost | currency}}-------->在这里如果使用{{i}}的输出方式的话,代码在页面执行的过程中会有一点延时性,所以一般为了较好的用户体验,我们
都是使用的ng-bind来输出我们循环得到的值,这样的话就会避免在页面上的瞬间闪速。
</div>
</body>
</html>
script.js:
function InvoiceCntl($scope) {
$scope.qty = 1;
$scope.cost = 19.95;
}
值得一提的是,我们既没有调用任何AngularJS的方法,也没有像用框架一样去编写某个具体逻辑,就是完成了上述功能。这个实现的背后是因为浏览器做了比以往生成 静态页面更多的工作,让它能满足动态WEB应用的需要。AngularJS使得动态WEB应用的开发门槛降到不需要类库或者框架的程度。
以上都是属于angular的一些好处,但是我们知道任何一个框架都不会是十全十美的,有他的优秀的一方面但同时一定会有他不足的一方面,看上去angular十分的强大,的确是的,如果是在开发一些大型的网站的时候,效率是非常的高,但是如果是我们用在小地方的话就会十分的低效率,因为即使你需要使用angular在控制台输出一个简单的hello world的话,你就需要配置整个angular,需要书写很多代码,即使这些代码对于你的开发工作没有用处。所以对一个框架我们还是需要全面的看待,在适合的时候使用。