您当前的位置: 首页 >  ar

12分布式电商项目 - AngularJS快速入门

杨林伟 发布时间:2019-07-02 14:40:21 ,浏览量:4

1.表达式

	
	
		入门小 Demo-1
		
	
	
	
		{{100+100}}
	

执行结果如下: 在这里插入图片描述 表达式的写法是{{表达式 }}表达式可以是变量或是运算式

ng-app 指令 作用是告诉子元素一下的指令是归 angularJs 的,angularJs 会识别的

ng-app 指令 定义了 AngularJS 应用程序的根元素。

ng-app 指令 在网页加载完毕时会自动引导(自动初始化)应用程序。

2.双向绑定

	
		入门小 Demo-1 双向绑定
		
	
	
		请输入你的姓名:
		
		{{myname}},你好
	

运行效果如下: 在这里插入图片描述 ng-model 指令用于绑定变量,这样用户在文本框输入的内容会绑定到变量上,而表达式可以实时地输出变量。

3.控制器

	
		入门小 Demo-3 初始化
		
		
			//定义函数
			function helloController($scope) {
				$scope.greeting = {
				text : "hello"
				};
			}
		
	
	
	
		

{{greeting.text}},angular!

ng-controller 用于指定所使用的控制器

理解 $scope$scope的使用贯穿整个 AngularJS App 应用,它与数据模型相关联,同时也是表达式执行的上下文.有了$scope 就在视图和控制器之间建立了一个通道,基于作用域视图在修改数据时会立刻更新 $scope,同样的$scope 发生改变时也会立刻重新渲染视图.

4.MVC模式

Angular 遵循软件工程的 MVC 模式,并鼓励展现,数据,和逻辑组件之间的松耦合,提高代码的复用性.angularJS 为后端减轻了很多业务压力,带来了更轻的 web 应用.

那么在 AngularJS 的应用中,怎么提现 mvc 设计模式的呢?下面来看以下代码展示 AngularJS 的 应用.



	
		
		Insert title here
				 
		
		
		//定义函数
		function helloController($scope) {
				$scope.greeting = {
				text : "hello" //模型层
				};
		}
		
	
	
	
		
//控制层

{{greeting.text}},angular!

//视图层
5.模块化设计

js 编程通常把 js 都放在全局环境中,那么这些变量函数,或者是对象都会产生在 window 对象下,会污染全局空间.为了更好管理 js,我们使用模块化的开发方式.



	
		
		Insert title here
		 
		
			//定义一个叫oneModule名称的模块
			var myModule = angular.module('oneModule',[]);
			//使用模块调用方法
			myModule.controller('helloController',function($scope){
				$scope.greeting = function(){
					return "hello,angular!";
				}
			})
		
	
	
		

{{greeting()}},angular!

6. 初始化指令

我们如果希望有些变量具有初始值,可以使用ng-init 指令来对变量初始化。



	
		入门小 Demo-3 初始化
		
	
	
	
		请输入你的姓名:
		
		{{myname}},你好
	


7.事件指令

	
		入门小 Demo-5 事件指令
		
		
			var app=angular.module('myApp',[]); //定义了一个叫 myApp 的模块
			//定义控制器
			app.controller('myController',function($scope){
				$scope.add=function(){
				$scope.z= parseInt($scope.x)+parseInt($scope.y);
			}
			});
		
	
	
	
		x:
		y:
		运算
		结果:{{z}}
	

运行结果: 在这里插入图片描述 ng-click 是最常用的单击事件指令,再点击时触发控制器的某个方法。

8.循环数组

	
		入门小 Demo-6 循环数据
		
		
			var app=angular.module('myApp',[]); //定义了一个叫 myApp 的模块
			//定义控制器
			app.controller('myController',function($scope){
				$scope.list= [100,192,203,434 ];//定义数组
			});
		
	
	
	
		
			
			{{x}}
			
		
	

这里的 ng-repeat 指令用于循环数组变量。

运行结果如下: 在这里插入图片描述

9.循环对象数组

	
		入门小 Demo-7 循环对象数组
		
		
			var app=angular.module('myApp',[]); //定义了一个叫 myApp 的模块
			//定义控制器
			app.controller('myController',function($scope){
			$scope.list= [
			{name:'张三',shuxue:100,yuwen:93},
			{name:'李四',shuxue:88,yuwen:87},
			{name:'王五',shuxue:77,yuwen:56}
			];//定义数组
			});
		
	
	
	
		
			
				姓名
				数学
				语文
			
			
				{{entity.name}}
				{{entity.shuxue}}
				{{entity.yuwen}}
			
		
	

运行结果如下: 在这里插入图片描述

10.内置服务

我们的数据一般都是从后端获取的,那么如何获取数据呢?我们一般使用内置服务$http 来实现。注意:以下代码需要在 tomcat 中运行。


	
		入门小 Demo-8 内置服务
		
		
		
			var app=angular.module('myApp',[]); //定义了一个叫 myApp 的模块
			//定义控制器
			app.controller('myController',function($scope,$http){
			$scope.findAll=function(){
				$http.get('data.json').success(
					function(response){
						$scope.list=response;
					}
				);
			}
		});
		
	
	
		
		
			
				姓名
				数学
				语文
			
		
			
				{{entity.name}}
				{{entity.shuxue}}
				{{entity.yuwen}}
			
		
		
	

建立文件 data.json:

[
	{"name":"张三","shuxue":100,"yuwen":93},
	{"name":"李四","shuxue":88,"yuwen":87},
	{"name":"王五","shuxue":77,"yuwen":56},
	{"name":"赵六","shuxue":67,"yuwen":86}
]
关注
打赏
1688896170
查看更多评论

杨林伟

暂无认证

  • 4浏览

    0关注

    3183博文

    0收益

  • 0浏览

    0点赞

    0打赏

    0留言

私信
关注
热门博文
立即登录/注册

微信扫码登录

0.0839s