初涉Angular js,还有许多不懂的地方,初步将自己学到的东西记录下来,便于日后的学习。
一、Angular js简介
AngularJs是一个JavaScript框架。他是一个以JavaScript编写的库,通过指令扩展HTML,通过表达式绑定数据到HTML。
二、AngularJs指令
AngularJs通过指令这一属性来扩展HTML,带有前缀ng-
ng-app 用来初始化一个AngularJs应用程序。
ng-init 用来初始化应用程序数据。
ng-model 用来把元素值绑定到应用程序中。
下面是一个应用AngularJs的实例:
<!DOCTYPE html> <html> <body> <div ng-app=""> <p>在输入框中尝试输入:</p> <p>姓名:<input type="text" ng-model="name"></p> <p ng-bind="name"></p> </div> <script src="http://apps.bdimg.com/libs/angular.js/1.3.9/angular.min.js"></script> </body> </html>
上面的效果如下(截了下屏,怕不清楚把边框瞄了下):
三、AngularJs表达式
AngularJs表达式写在双括号内{{ }}。
AngularJs表达式把数据绑定到HTML上,与ng-bind差不多
AngularJs表达式将在表达式书写的位置“输出”数据。
AngularJs表达式可以包含文字,运算符和变量。
例:
<!DOCTYPE html> <html> <body> <div ng-app=""> <p>我的第一个表达式: {{ 5 + 5 }}</p> </div> <script src="http://apps.bdimg.com/libs/angular.js/1.3.9/angular.min.js"></script> </body> </html>
运行结果如下:
四、AngularJs控制器
AngularJs控制器控制AngularJs应用程序的数据。
AngularJs控制器同时也是JavaScript对象
使用指令ng-controller定义AngularJs控制器
例:
<div ng-app="myApp" ng-controller="myCtrl"> 名: <input type="text" ng-model="firstName"><br> 名: <input type="text" ng-model="lastName"><br> <br> 姓名: {{firstName + " " + lastName}} </div> <script> var app = angular.module('myApp', []); app.controller('myCtrl', function($scope) { $scope.firstName = "John"; $scope.lastName = "Doe"; }); </script>
效果如下:
今天的大概就先来了解一下AngularJs,还有许多许多不理解的地方,例如控制器的写法为什么里面要写$scope 写别的不可以吗??
相关推荐
前端教程之 Angular 教程
angular.js学习
angular 对于初学者来说,无疑会带来极大的帮助,帮你搭建合理前端MVC框架,并指导你迅速学习JavaScript进行服务器端的编码和调试。极大提高学习效率,缩短时间成本。
本书是学习 AngularJS 的公认经典,内容全面,讲解通俗,适合各层次的学习者。作者拥有丰富的 AngularJS 开发和教学经验,也是一位全栈工程师。全书 35 章,由浅入深地讲解了 AngularJS 的基本概念和 基本功能,包括...
Angular6.r68.2018最新版随书源代码, 学习angular最佳资源。代码已手动修改为angular6版本,供学习参考。使用方法:解压后进入项目目录,执行npm install,nmp start即可使用,需要angular-cli@6.0.x,typescript@...
Angular.js 英文书籍(2015)共15本。打包成一个档,以节省大家的时间。 AngularJS - DeveloperGuide.pdf AngularJS by Example (Packt 2015).pdf AngularJS Deployment Essenti als (Packt 2015).pdf AngularJS ...
前提 Angular1.5 到 Angular4.0是重写的语言,Angular1简称...在Angular知识学习(一)中有讲述到表单的知识,不过那是最基础的演示,在之后的学习中又了解到模板驱动表单,所以考虑对之前的表单案例进行重构,完善表单
angularjs学习需要导入的angular.js
Angular JS(2009): 支持MVC模式(模型$scope.xxx,视图html,控制器controller); 支持双向数据绑定(视图与模型,控制器可以操作模型); 支持依赖注入(服务依赖注入到控制器)
Angular学习教程:手把手教你学会Angular(2 ),源码见于本demo项目
本资源提供angular.js的多个版本1.2.25、1.2.29/1.5.7,如若是学习需要,可私信本人,本人可无偿私发资源。
基于maven的ssm+springsecurity+angular.js的个人计划前后分离小练习,完成了部分功能,全套的html页面,适合学习ssm整合或者锻炼自己的能力去完善它
AngularJS 通过新的属性和表达式扩展了 HTML。 AngularJS 可以构建一个单一页面应用程序(SPAs:Single Page Applications)。 AngularJS 学习起来非常简单。
两个简单tab切换 可用 适合新手学习
最全面的Angular4.0教程_极品.zip 1.用VS CODE调试Angular4 2.Angular 4 基础教程 3.Angular4学习笔记2 Angular 2 TypeScript Live Template ...Angular4引入第三方JS ng4都有什么 ng4路由 TypeScript就看这一个例子就
学习.angular.js 学习 Angular JS。
学习 Angular.js 学习 Angular.js
开始学习AngularJS的一个好方法是创建经典应用程序“Hello World!”:
angular js学习文档,给需要的同学参考,介绍的还算详细的文档
适合小白学习前端开发技术js,es5,typescript,angular2等技术