zoukankan      html  css  js  c++  java
  • angularJS笔记

    1、MVC

    ng-app: html表头处,每个htnl文件只能有一个ng-app

    ng-controller :js文件中定义

    ng-model:只要引用了angularJS就可以使用

      js文件代码如下:

    var myMoudle = angular.module("HelloAngular",[]);
    
    myMoudle.controller("HelloAngular",['$scope', //控制器 C
    	function HelloAngular($scope){
    		$scope.greeting = {
    			text: "Hello"
    		}
    	}
    ])
    myMoudle.directive("hello",function(){  //重定义前端 V
    	return{
    		restrict : 'E',
    		template: '<div>Hi everyone!',
    		replace: true
    	}
    });
    

      html文件代码如下:

    <!doctype html>
    <html ng-app = "HelloAngular"> 
    <head>
    	<meta charset = "utf-8">
    </head>
    <body>
    	<div ng-controller = "HelloAngular">
    		<p>{{greeting.text}},Angular</p>
    		<p>{{greeting.text}},Angular</p>
    		<hello></hello>
    	</div> 
    	<div>
    		<input ng-model = "greeting.text"/> <!--model M-->
    		<p>{{greeting.text}},Angular</p>
    	</div> 
    </body>
    
    <script  src = "../../node_modules/angular/angular.js"></script>
    <script  src = "Hello_Angular_Module.js"></script> 
    
    </html>
    

      ng-repeat : 内敛使用

      ng-click: 点击事件

    <li ng-repeat = "i in [1,2,4,3]" ng-controller = "xxx">{{i}}
    

      神奇的$scope

    1、$scope是一个POJO(js对象)

    2、$scope提供了一些工具方法($watch()$applay())

    3、$scope是一个树形结构,与DOM标签平行

    4、子$scope对象会继承父$scope上的属性和方法

    4、每个angularjs会有一个根$scope,一般位于(ng-app)

    angularjs启动时首先查找ng-app,然后查找$rootscope

  • 相关阅读:
    Harbor私有镜像仓库(下)
    项目课---企业级Memcached服务应用实践(八)
    项目课---OpVEN架构实施方案(七)
    项目课---Mha-Atlas-MySQL高可用方案实践(六)
    Nginx 反向代理
    Ansible搭建LNMP
    Ansible
    Ansible运维自动化
    JAVA企业级应用服务器之TOMCAT实战
    ssh自动分发密匙脚本样板
  • 原文地址:https://www.cnblogs.com/likailiche/p/4807103.html
Copyright © 2011-2022 走看看