本人刚刚接触AngularJS,还不太熟悉,就说说我目前遇到的一些注意点吧。

  1、调用外来文件script文件

AngularJS核心特性一  MVC

MVC设计模式

html文件

<!DOCTYPE html>
<html >
  <head>
  <meta charset="UTF-8">
  <title></title>
  </head>
  <body>

    //ng  表示 angular ,ng-app放在这一行的div上,就决定与Angular脚本放哪里,表示作用于只在这一行内的div有效;ng-controller 表示控制器;greeting.text 表示 module参数

    //注意: 调外来文件的时候,ng-app 不需要带参数,如:ng-app="myAPP"
    <div ng-app ng-controller="HelloAngular"> 
      <p>{{greeting.text}},Angular</p>
    </div>
    <script type="text/javascript" src="js/angular.min.js" ></script>//angularJs的封装好的文件
    <script type="text/javascript" src="js/angular.js" ></script>//自己写的script外来文件
  </body>
</html>

scrript文件

//不需要(function(){表达式})();只需要一个函数 function  HelloAngular(ng-controller的控制器参数){表达式}

function HelloAngular($scope){
  $scope.greeting = {
    text : 'hello'
  };
}

AngularJS核心特性二    模块化

//但是上面的script是全局,这样做会污染全局空间,这样做不怎么高大尚,所以将其模块化

html文件

<!DOCTYPE html>
<html >
  <head>
  <meta charset="UTF-8">
  <title></title>
  </head>
  <body>

    //ng  表示 angular ,ng-app放在这一行的div上,就决定与Angular脚本放哪里,表示作用于只在这一行内的div有效;ng-controller 表示控制器;greeting.text 表示 module参数

    //ng-app="myAPP"相当于 js里面的main方法

    //注意: 调外来文件的时候,ng-app 不需要带参数,如:ng-app="myAPP"
    <div ng-app="helloAngular" ng-controller="HelloAngular"> 
      <p>{{greeting.text}},Angular</p>
    </div>
    <script type="text/javascript" src="js/angular.min.js" ></script>//angularJs的封装好的文件
    <script type="text/javascript" src="js/angular.js" ></script>//自己写的script外来文件
  </body>
</html>

scrript文件

//不需要(function(){表达式})();只需要一个函数 function  HelloAngular(ng-controller的控制器参数){表达式}

var app = angular.module("helloAngular",[]);  //第一个参数:定义一个模块  “helloAngular” ; 第二个参数: []  表示 本模块所依赖的子模块的集合(就像是main函数下的调用的子函数)
app.controller("HelloAngular",['$scope', //$scope  告诉AngularJS 要使用$scope参数   $scope 必须与下面调用的函数带的参数 $scope 是一样的
  function (函数名(随便取))($scope){
    $scope.greeting = {
    text : 'Hello'
    }
  }
]);

AngularJS核心特性三  ---- 指令系统(可以自定义标签名,然后写封装他们标签名;除了可以封装自定义标签,还可以做其他的功能)

html文件

<!DOCTYPE html>
<html ng-app="myModule">
  <head>
  <meta charset="UTF-8">
  <title>driection指令系统</title>
  </head>
  <body>
    <hello></hello> //随便去的标签名字
    <script type="text/javascript" src="js/angular.min.js" ></script>
    <script type="text/javascript" src="js/angular_Direction.js" ></script>
  </body>
</html>

angular_Direction.js文件

var myModule = angular.module("myModule",[]);  //angular.module创建模块
myModule.directive("hello",function(){  //‘hello’ 自定义标签名
  return {
    restrict:"E",
    template:'<div>Hi everyone!</div>',   //替换“hello”标签名的模块
    replace: true
  }
});

AngularJS核心特性四  ----- 双向数据绑定(MVVM)

html文件  不需要JS文件

<!DOCTYPE html>
<html ng-app>
  <head>
  <meta charset="UTF-8">
  <title></title>
  </head>
  <body>
    <div>
      <input ng-model="greeting.text" />
      <p>{{greeting.text}},AngularJS</p>
    </div>
    <script type="text/javascript" src="js/angular.min.js" ></script>
  </body>
</html>

AngularJS核心特性(四大点)的更多相关文章

  1. angularJS的核心特性

    前几天师傅让我了解一下angularJS,angularJS是一个前端框架,具体的优缺点和运用场景我现在也还没有搞清楚,暂时就先不做描述了,留到运用以后进行补充吧. angularJS四大核心特性:M ...

  2. 关于AngularJS学习整理---核心特性

    接触.学习AngularJS已经三个多月了,随着学习的深入,有些东西刚开始不明白,现在开始慢慢明白起来.于是,开始整理这几个月的学习成果.要不又要忘了...  初学Angular,是看到慕课网大漠穷秋 ...

  3. angular学习笔记(1)- 四大核心特性

    angular1学习笔记(1) -  angular1四大核心特性 1.MVC model:数据模型层 controller:业务逻辑和控制逻辑 view:视图层,负责展示 2.模块化 Module ...

  4. Angular四大核心特性

    Angular四大核心特性 Angular四大核心特性理论概述 MVC模式:它目的是为了分离视图.模型和控制器而设计出来的:其中数据模型用来储存数据,视图用来向用户展示应用程序,控制器充当模型和视图之 ...

  5. 乐字节Java8核心特性之方法引用

    大家好,我是乐字节的小乐,上一次我们说到了Java8核心特性之函数式接口,接下来我们继续了解Java8又一核心特性--方法引用. Java8 中引入方法引用新特性,用于简化应用对象方法的调用, 方法引 ...

  6. Java Gradle入门指南之gretty插件(安装、命令与核心特性)

        Java Web应用开发时常使用Gradle来进行项目管理,可以十分便利地解决包依赖等问题.war插件的出现,让项目部署成为一个复制粘贴的过程,那有没有办法让Java web应用的部署,就像w ...

  7. ES6核心特性

    摘要:聊JS离不开ES6啊! 原文:ES6核心特性 作者:ljianshu 前言 ES6 虽提供了许多新特性,但我们实际工作中用到频率较高并不多,根据二八法则,我们应该用百分之八十的精力和时间,好好专 ...

  8. Zookeeper系列2 原生API 以及核心特性watcher

    原生API 增删改查询 public class ZkBaseTest { static final String CONNECT_ADDR = "192.168.0.120"; ...

  9. 乐字节-Java8核心特性实战之Stream(流)

    说起流,我们会想起手机 ,电脑组装流水线,物流仓库商品包装流水线等等.如果把手机 ,电脑,包裹看做最终结果的话,那么加工商品前的各种零部件就可以看做数据源,而中间一系列的加工作业操作,就可以看做流的处 ...

随机推荐

  1. 集成Spring web.xml配置总结

    1.web.xml 的加载顺序是:ServletContext -> context-param -> listener -> filter -> servlet 1.serv ...

  2. WEB开发中常见漏洞

    1.sql注入 SQL注入在黑客领域是一种非常常见的攻击手段,大家应该都听说过很多数据泄漏的案例,其中大部分都是采用SQL注入来获取数据的. SQL注入一般是前端向后台提交数据的时候,在数据中加入SQ ...

  3. MapReduce-读取文件写入HBase

    MapReduce直接写入HBase 代码如下 package com.hbase.mapreduce; import java.io.IOException; import org.apache.c ...

  4. 美化tp5.1跳转提示

    <html> <head> <meta http-equiv="Content-Type" content="text/html; char ...

  5. 谷歌地图OGC WMTS服务规则

    http://mt0.google.cn/vt/lyrs=s&x=0&y=0&z=1 其中:z即为瓦片的层次,0层覆盖全球:y为行,从上往下为0~2^z-1:x为列,从左往右依 ...

  6. ansible实现发布、回滚功能

    ansible的两篇博客,本来是打算合二为一的,发现只用一篇写,嗯,好鬼长.... 一向秉承简单为美的我于是忍痛割爱,一分为二了 ansible实现升级发布.回滚功能 1.应用场景 在实际生产环境中, ...

  7. 【疯了C#】神奇的换肤(二)

    昨天参照了网上的资料练习了换肤,今天进一步的实现选择换肤 其实很简单,需要实现的功能如下点击combobox中的不同项目然后面板会自动的切换到相应的界面主题. 界面如下: 下述代码参照 “张隽永” 博 ...

  8. 强制关闭iPhone iPad AppleWatch MacOS

    iPhone/iPad 强制关闭APP:按住Power(电源键),出现关机界面松开,按住Home键9秒左右. 强制重启/关机:同时按住Power和Home键几秒后重启,出现logo时松开Home继续按 ...

  9. MinGW main()

    MinGW没有wmain入口函数,为了获取宽字符的参数,可以用系统API函数GetCommandLineW. main.cpp #include <iostream> #include & ...

  10. DQN 处理 CartPole 问题——使用强化学习,本质上是训练MLP,预测每一个动作的得分

    代码: # -*- coding: utf-8 -*- import random import gym import numpy as np from collections import dequ ...