Angular.js学习之一下载和搭建hello world实例
2016-07-19 10:26
495 查看
第一天学习angular框架,首先在下载angular.js脚本就遇到了困难,我在angular官网找到GitHub上的源码,下载下来后却发现找不到该脚本文件。又各种查找下载途径,最后在http://www.yiibai.com/angularjs/angularjs_environment.html这里找到下载方法。点击好多次都没反应,最后才发现要点击图标上面的那串文本~。囧
不过我测试直接使用官网的cdn地址:
<script src="http://code.angularjs.org/angular-1.0.1.min.js"></script>
首先,通过html标签添加ng-app="name"[name是自定义的名称],来告知浏览器我们创建了一个angular项目,需要使用angularJS来处理HTML文档。通过ng-directives 扩展 HTML。
从HTML文档里面的语法在结合自己做后端开发的理解,都是差不多的。就像asp一样,通过遇到这个标记<%'asp代码%>浏览器解析过程自动分辨asp代码来执行。net mvc也是如此。通过@{}来分辨的。因此,我在学习angular就会把他想象成后端语言那样处理。在页面上定义变量,在controller控制器专门书写方法输出数据。
{{}}告诉浏览器该用angular的标准执行代码了,‘文本’使用单引号来输出文本。只要搭建好hello world,接下来在去学习语法就快多了。
通过测试发现,我吧Testcontroller写成testcontroller后,程序并不能正确输出值。angularJS严格区分大小写!
经过反复测试发现,如果给ng-app="name"就必须初始化模块【angular.module("myapp", [])】,否则无效
不过我测试直接使用官网的cdn地址:
<script src="http://code.angularjs.org/angular-1.0.1.min.js"></script>
<!DOCTYPE html> <html ng-app="myapp"> <head> <meta charset="UTF-8"> <title></title> <script src="js/angular.min.js"></script> <script src="http://code.angularjs.org/angular-1.0.1.min.js"></script> </head> <body> hello {{'world'}} <div class="" ng-controller="Testcontroller"> <h2>Welcome to {{helloTo.title}} the world of Yiibai!</h2> </div> <script type="text/javascript"> angular.module("myapp", []) .controller("Testcontroller", function($scope){ $scope.helloTo={}; $scope.helloTo.title="AngularJS"; }) </script> </body> </html>
首先,通过html标签添加ng-app="name"[name是自定义的名称],来告知浏览器我们创建了一个angular项目,需要使用angularJS来处理HTML文档。通过ng-directives 扩展 HTML。
从HTML文档里面的语法在结合自己做后端开发的理解,都是差不多的。就像asp一样,通过遇到这个标记<%'asp代码%>浏览器解析过程自动分辨asp代码来执行。net mvc也是如此。通过@{}来分辨的。因此,我在学习angular就会把他想象成后端语言那样处理。在页面上定义变量,在controller控制器专门书写方法输出数据。
{{}}告诉浏览器该用angular的标准执行代码了,‘文本’使用单引号来输出文本。只要搭建好hello world,接下来在去学习语法就快多了。
通过测试发现,我吧Testcontroller写成testcontroller后,程序并不能正确输出值。angularJS严格区分大小写!
经过反复测试发现,如果给ng-app="name"就必须初始化模块【angular.module("myapp", [])】,否则无效
相关文章推荐
- Html,Css,Javascript及其他的注释方法详解
- JS中typeof与instanceof之间的区别总结
- url传递json对象
- js 格式化数字,html input type=datetime-local赋值
- JSON与MODEL互转
- js 动态添加元素(div、li、img等)及设置属性的方法
- Chrome调试js出现Uncaught SyntaxError: Unexpected identifier
- 教你轻松记住JS正则表达式
- JS把内容动态插入到DIV的实现方法
- js组件化1 input 框后span计算输入数字
- jsoup eg
- JS动态给对象添加事件的简单方法
- js操作字符串的常见方法
- js中的delete运算符
- JSP及Servlet相关基础技术 学习笔记
- javascript中new Date()对象和getTime()方法的问题(又是来提问,(-__-)b)
- 老生常谈js动态添加事件--- 事件委托
- js跨域问题浅析及解决方法优缺点对比
- JavaScript基础
- js取最值: