AngularJS 001:初识
来源:互联网 发布:java返回前台json对象 编辑:程序博客网 时间:2024/06/10 19:26
互联网技术总是在快速更新,正所谓,去年今日此门中,人面桃花相映红,人面不知何处去,桃花依旧笑春风。技术的变化推动这开发模式的改变;易经中一个重要的思想就是:变。世界无时无刻不在变化,所以我们要不断学习以适应这种变化。如今我们不光要不断学习,还需要快速学习,快速掌握新知识,以应对技术的不断更新。
AngularJS历史就不多介绍了,其本质来说,AngularJS并不是新发明,只是一种改进罢了。它的基础还是javascript,工程师们用js写了很多函数,从而形成了一个框架,一个新的开发模式。所以只要理解JS,html,css这些基本技术的小伙伴们,anjularjs很好上手。
以下所有代码,都以Asp.net为展现平台,和大家一起了解下AngularJS如何使用,
代码
效果如下
这里有几个特别的属性,
ng-app 指令定义一个 AngularJS 应用程序。
ng-model 指令把元素值(比如输入域的值)绑定到应用程序。
ng-init,是一个指令,初始化了一个值。
效果
AngularJS 应用
效果
AngularJS历史就不多介绍了,其本质来说,AngularJS并不是新发明,只是一种改进罢了。它的基础还是javascript,工程师们用js写了很多函数,从而形成了一个框架,一个新的开发模式。所以只要理解JS,html,css这些基本技术的小伙伴们,anjularjs很好上手。
以下所有代码,都以Asp.net为展现平台,和大家一起了解下AngularJS如何使用,
所谓,纸上得来终觉浅,绝知此事要躬行。直接代码来说话。
以下所有代码工程文件:http://download.csdn.net/detail/yysyangyangyangshan/9691429
先使用一个angularJS的js文件(工程中包含有,可下载整个工程文件),
第一个angularJS程序代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head runat="server"> <meta charset="utf-8"><script src="/Scripts/angular.min.js"></script></head><body> <div ng-app=""> <p>名字 : <input type="text" ng-model="name"></p> <h1>Hello {{name}}</h1></div></body></html>
效果如下
这里有几个特别的属性,
ng-app 指令定义一个 AngularJS 应用程序。
ng-model 指令把元素值(比如输入域的值)绑定到应用程序。
ng-bind 指令把应用程序数据绑定到 HTML 视图。
AngularJS 指令
ng-为前缀的,一般是指令。
比如,看一下如何初始化值,
<!--anjularjs初始化--><div ng-app="" ng-init="firstName='yys'"><p>姓名为 <span ng-bind="firstName"></span></p></div>效果:
ng-init,是一个指令,初始化了一个值。
上面我们注意到是ng-开头的,这种是普通html属性,
angularJS还支持html5的扩展,它使用data-ng开头的,比如
<!--Html5扩展--> <div data-ng-app="" data-ng-init="firstName='yys'"> <p>姓名为 <span data-ng-bind="firstName"></span></p> </div>
效果
AngularJS 表达式
表达式格式为:{{ expression }}。
如下代码
<!--表达式--> <div ng-app=""> <p>我的第一个表达式: {{ 1 + 1 - 3 + 5}}</p> </div>效果
AngularJS 应用
<!--应用--><div ng-app="myFirstApp" ng-controller="myFirstCtrl">名: <input type="text" ng-model="firstName"><br>姓: <input type="text" ng-model="lastName"><br><br>姓名: {{firstName + " " + lastName}}</div><script> var app = angular.module('myFirstApp', []); app.controller('myFirstCtrl', function ($scope) { $scope.firstName = "Sam"; $scope.lastName = "Yang"; });</script>
效果
ng-app指令定义了应用, ng-controller 定义了控制器。
模块(Module) 定义了 AngularJS 应用。
控制器(Controller) 用于控制 AngularJS 应用。
1 0
- AngularJS 001:初识
- 初识AngularJS
- angularJS初识
- 初识AngularJS
- 初识AngularJS
- 初识angularJs
- 初识angularJs
- 初识AngularJS
- 初识AngularJS
- 初识AngularJS
- angularjs初识
- 初识AngularJS
- 初识AngularJS
- 初识AngularJS
- 初识AngularJS
- AngularJS 世界------初识Angularjs
- Angularjs 路由之初识
- AngularJS初识--作用域
- 欢迎使用CSDN-markdown编辑器
- django模板的使用
- Java在一定范围随机生成经纬度
- com.android.builder.packaging.DuplicateFileException: Duplicate files copied in APK META-INF/DEPENDE
- Android Material design设计风格
- AngularJS 001:初识
- ios判断是否存在网络或什么网络
- Android View 绘制过程
- django 自定义模板标签和过滤器
- DB_1_mysql
- 行内块元素的解释
- 软件项目管理案例教程笔记
- jira 涉及到scriptrunner的一些过滤器 提供的函数
- 7.目标和文件