初级angular

前几个月,又是过年,又是项目,今天补一篇。

  angular是google产的,其他没怎么关心,学习主要是数据的双向绑定,是一个MVC框架,V就是html页面,C即angular的controller,M就是数据对象。

  angular的形式是个app,声明方式就是在父级data-ng-app=‘ ‘;或者ng-app=‘ ‘;

  <div ng-app=""></div>这样就定义了一个angularJS的应用程序,这只是一个声明,一个html页面默认只有一个angular程序,若含有多个,第二个及以后的angular程序就自己手动激活:

  <div ng-app=‘appOne‘ id=‘one‘></div>

  <div ng-app=‘appTwo‘ id=‘two‘></div>

  <div ng-app=‘appThree‘ id=‘three‘></div>

  //添加多个,激活除了第一个以外的app

  <script>

    var one = angular.module(‘appOne‘, []);  //angular的模块入口,加载controller,service等模块

    var two = angular.module(‘appTwo‘, []);

    var three = angular.module(‘appThree‘, []);

   //激活程序

    angular.element(document).ready(function(){

      angular.boostrap(document.getElement(‘two‘), [‘appTwo‘]);

      angular.boostrap(document.getElement(‘three‘), [‘appThree‘]);

    });

</script>

  

  再说一下程序与元素的数据双向绑定

  主要用到的是ng-model属性和ng-bind({{}}),若你要初始化一个app的数据,可以用ng-init属性;

  <div ng-app=‘‘ ng-init=‘x=5‘>

    <p><input type=‘text‘ ng-model=‘num‘/></p>

    <p ng-bind=‘num‘></p>

    <p>{{x}}</p>

  </div>

  继续说angular中的ajax吧:

  angular中的ajax主要用到angular中的$http服务,用于读取远程服务器的数据(也可以数据库哦),$http.post(url).success(),$http.get(url).success();

  <div ng-app=‘app‘ ng-controller=‘ctrl‘>

    <ul>

      <li ng-repeat=‘x in num‘></li>

    </ul>

  </div>

  <script>

    var app = angular.module(‘app‘, []);

    app.controller(‘ctrl‘, function($scope, $http){

      //如果用到post,直接把get换成post

      $http.get(url).success(function(response){

        $scope.num = response.num;

      });

    });

  </script>

  angular中的service,directive,controller是什么?我们该如何用它?

  敬请下期!

ps:由于加载效率问题,请把angular放到底部,那么相应的写的脚本也要放到底端,否则会报错!

时间: 2024-08-27 12:55:05

初级angular的相关文章

手动搭建一个完整的angular实践项目

以下我记录如何简单的搭建一个angular项目, 比较适合有前端基础,但又没有使用过angular的前端开发人员,因为我看到网上的教程又都配套的使用了一些其他框架或者打包工具,以及进行一些复杂的开发环境配置,不利于初级的人学习和理解.后续我也会陆续写几篇结合不同工具框架,以及在混合app开发中搭建angular框架项目. 应用场景: 基于angular的PC端web项目,采用require加载资源,使用angularAMD和angularCSS实现按需加载angular的controllers和

极客学院Web前端开发技术实战视频教程 初级入门+高级实战++专家课程+面试指导

===============课程目录=============== ├<初级中级>│  ├<1. HTML5开发前准备>│  │  ├1.HTML5开发前准备.mp4│  │  └2.开发前的准备-快捷键.mp4│  ├<10. React.js>│  │  ├React.js简介.txt│  │  ├<1.React 概述>│  │  │  ├React 开发环境搭建.mp4│  │  │  ├编写第一个 React 程序.mp4│  │  │  └什么

angular中模板

<!DOCTYPE html><!--调用模块--><html lang="en" ng-app="myApp"><head> <meta charset="UTF-8"> <script src="js/angular.js"></script> <title>Title</title></head><

利用angular打造管理系统页面

1 创建一个新的angular应用 ng new adminSystem 2 利用WebStorm打开adminSystem应用 3 借助AdminLTE这个开源项目来辅助开发 AdminLTE项目:点击前往 将AdminLTE项目的精简版本源代码复制到adminSystem应用主模块的主组件的模板中 AdminLTE项目的精简版本效果图 <!DOCTYPE html> <!-- This is a starter template page. Use this page to star

Angular基础(二) 组件的使用

? 一.简单操作 a) 使用Angular CLI可以快速创建项目框架,先运行 $ npm install –g @angular/[email protected]安装CLI,为CLI的位置设置环境变量,然后就可以全局使用ng命令了. 执行ng new –ng4 angular-hello-world可以创建Angular4项目,会自动生成基础的文件夹和文件,还会自动进行npm i操作,下载并安装所需的依赖. 然后执行ng serve就可以编译并启动这个程序了,但ng并不会自动打开浏览器. b

Angular 2基础(一) 环境搭建

Angular2是一款开源JavaScript库,由Google维护,用来创建页面应用程序.正式发布于2016年9月,基于ES6开发. 一.准备工作 使用Angular2开发,需要预先做一些配置上的配置,如NPM.Node.Js.Git等,还要对TypeScript有个大概的了解. a)NPM是随同NodeJS一起安装的包管理器,那应该类似NuGet的作用了.NPM集成在了NodeJS安装包,可以一起安装,在CMD输入npm –v和node –v可以验证是否已安装. b)TypeScript则是

angular踩坑之路:初探webpack

之前费了一番力气安装好了angular开发环境,后面的几天都是在angular中文官网上看文档,照着英雄教程一步一步操作,熟悉了angular的一些基本特性,这部分没有遇到什么大问题,还比较顺利.这两天在看官方文档中的Webpack简介,想跟着文档做一遍,了解一下如何用Webpack打包angular项目,结果遇到了一些问题,因为是初学angular和Webpack的小白,这些问题一时难以解决,花费了不少时间,想在这里记录一下. 首先跟着文档将相关的文件都添加到项目中,目录是这样子的: 根据文档

angular参考手册拷贝

AngularJS 参考手册 AngularJS 指令 本教程用到的 AngularJS 指令 : 指令 描述 ng-app 定义应用程序的根元素. ng-bind 绑定 HTML 元素到应用程序数据 ng-bind-html 绑定 HTML 元素的 innerHTML 到应用程序数据,并移除 HTML 字符串中危险字符 ng-bind-template 规定要使用模板替换的文本内容 ng-blur 规定 blur 事件的行为 ng-change 规定在内容改变时要执行的表达式 ng-check

angular 动画

ngAnimate 做了什么? ngAnimate 模型可以添加或移除 class . ngAnimate 模型并不能使 HTML 元素产生动画,但是 ngAnimate 会监测事件,类似隐藏显示 HTML 元素 ,如果事件发生 ngAnimate 就会使用预定义的 class 来设置 HTML 元素的动画. AngularJS 添加/移除 class 的指令: ng-show ng-hide ng-class ng-view ng-include ng-repeat ng-if ng-swit