Angular 笔记

ng- : 指令ng-app : 指定angular使用的区域    (一般加在html标签中   <html lang="en" ng-app="myApp">)ng-init : 初始化数据ng-model : 绑定了标签的值  
双向数据绑定实现:  HTML中呈现的view与AngularJS中的数据是一致的. 修改其一, 则对应的另一端也会相应地发生变化.请输入:<input type="text" ng-model="value"><h1 ng-bind="value"></h1>   或者  <h1> {{value}} </h1>      后者有闪烁,前者没有
表达式:ng-init: 定义多个数据模型,中间使用 ; 隔开  (很少这样使用)<div ng-init="price=10;count=5;firstName='张三';name='zs';a={name:'123'}"><div>表达式使用要求:       {{表达式}} : 表达式,表示在网页中原样输出1.不能在表达式里面定义变量2.不能有if操作3.不能定义函数4.不能在里面循环<!--在表达式中不能使用这些类似于parseInt这样的方法-->表达式的绑定是单向绑定的例如:{{name}}<input type="text" value={{name}}><input type="text" ng-value="name">
模块:    在<script></script>中创建注册创建模块:第一个参数:模块名    <html lang="en" ng-app="myApp">  与之对应第二个参数:放置需要依赖的模块例如 :  var app = angular.module('myApp',[]);通过模块创建控制器:第一个参数:控制器的名字第二个参数:控制器的执行函数$scope是一种服务,服务里面有自己的属性方法,可以直接调用$scope可以看成是数据模型scope是作用域例如 :   
//数组构造控制器来解决依赖注入的压缩问题
app.controller('firstController',['$scope',function ($scope) { //属性$scope.title = '张三';//方法$scope.fun = function () {$scope.age = 18;}//处理业务逻辑}]);
no-repeat:   用于循环输出指定次数的 HTML 元素。
<!DOCTYPE html>
<html lang="en" ng-app = "myApp">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><div ng-controller="firstCtrl"><ul><!--作用于数组 当有重复数据的时候,根据下标遍历数组,后面接track by $index-->         <!--ng-class: 设置类 "{类名:true/false}"--><!--ng-repeat 自带的属性值$index,$event(下标为偶数,从0开始),$odd(下标为奇数),$first,$last--><li ng-repeat="key in datatrack by $index" ng-class="{pink: $even,magenta:$odd}">
{{key}}
</li>
<!--作用于对象数组 每个key指的是每个元素-->
<li ng-repeat="key in data1" ng-class-even="'pink'" ng-class-odd="'magenta'">
{{key.name+','+key.age}}
</li> 
<!--作用于对象--> 
<li ng-repeat="(key,value) in person">{{key+','+value}}
<!--子标签也会克隆一次-->
<span>abc</span> 
</li><p ng-class="classNames">类名添加</p></ul>
</div>
</body>
</html>
<script src="angular.js"></script>
<script> 
//创建模块 
var app = angular.module('myApp',[]); 
app.controller('firstCtrl',function ($scope) { 
//属性 
$scope.data = [1,2,3,4,5,5,6]; 
$scope.data1 = [{name:'zs',age:15},{name:'ls',age:18},{name:'ww',age:20}]; 
$scope.person = {name:'张三',age:18};
// 添加类名$scope.classNames = {red:true,frame:true};   })
</script>链式编程:注入一般指的是:在执行函数里面注入一个服务($scope,$http)或者对象,对象和服务是系统提供的有自己的属性方法,我们不需要管他从哪里来,直接调用就可以了
方法一:var app = angular.module('myApp',['ngSanitize']);app.controller('firstCtrl',function ($scope) {$scope.title = '张三';});
方法二:angular.module('myApp',[]).controller('firstCtrl',function ($scope) {$scope.title = '张三';})
方法三:var app = angular.module('myApp',[]);angular.module('myApp').controller('firstCtrl',function ($scope) {$scope.title = '张三';})
控制器 : 一个控制器应用中包含另一个控制器,内部的控制器会继承上一级控制器<div ng-controller="parentCtrl"><!-- 分别定义的两个控制器 firstCtrl 继承了 parentCtrl --><div ng-controller="firstCtrl">{{name}}</div></div>   
rootScope:根作用域app.controller('secondCtlr',['$scope','$rootScope',function (s,r) {s.name = '神马';r.title = '改变全局';    //同样也能改变全局变量}]);//run方法用于初始化全局的数据，仅对全局作用域起作用。app.run(['$rootScope',function (rootScope) {rootScope.title = '根作用域';     //定义全局}]);过滤器应用:
<!DOCTYPE html>
<html lang="en" ng-app="myApp" ng-controller="firstCtrl">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><!--字符串大小写-->{{'we are family' | uppercase}}{{'We Are Family' | lowercase}}<!--将json对象格式化为json字符串-->{{{name:'张三',age:18} | json}}<!--时间格式化--><p>{{1478917631176 | date}}</p><p>{{date | date}}</p><p>{{date | date:'MM/dd/yyyy @ h::mma'}}</p><p>{{date | date: 'yyyy-MM-dd hh:mm:ss'}}</p><!--number 格式化--><p>{{123456 | number}}</p><!--保留三维小数,并且四舍五入--><p>{{1.23456 | number}}</p><p>{{1.23456 | number:2}}</p><!--货币格式化--><p>{{250 | currency}}</p><p>{{250 | currency:'¥'}}</p><!--字符串的截取--> <p>{{'I love you' | limitTo:6}}</p>   <!-- 截取顺数6个  结果为:I love --><p>{{'I love you' | limitTo:-6}}</p>  <!-- 截取倒数6个 结果为:ve you --><!--数组的截取:返回值还是数组--><p>{{[1,2,3,4] | limitTo: 2}}</p>    <!-- 表示截取2个 结果为:[1,2] --><!--查找 filter --><!--查找含有某个字符--><p>{{[{name:'哪吒',age:3},{name:'西门',age:40},{name:'金莲',age:18}] | filter:8}}</p><!--查找名字为哪吒的对象,最后面应该加上空格  person是个对象数组 --><p>{{person | filter:{'name':'哪吒'} }}</p><!--排序 orderBy :默认是从小到大,升序--><p>{{person | orderBy:'age' }}</p><!-- orderBy为true的时候是降序排列--><p>{{person | orderBy:'age':true }}</p><!--几个过滤器一起使用--><p>{{person | orderBy:'age':true | filter:8 }}</p><!--在指令中添加过滤器--><ul><li ng-repeat="x in person | orderBy: 'age' ">{{x.name + ',' + x.age}}</li></ul><!-- 控制器添加过滤器的调用 --><p>{{up}}</p><p>{{time}}</p>  <p>{{filter}}</p><!-- 自定义的过滤器调用 --><p>{{'hello everybody' | replace:2 }}</p><p>{{'hello everybody' | replace:3 }}</p></body>
</html>
<script src="angular.js"></script>
<script> 
//创建模块 
var app = angular.module('myApp',[]);
//如果要在控制器中使用过滤器,必须注入服务: $filter 
app.controller('firstCtrl',['$scope','$filter',function ($scope,$filter) { 
var date = new Date(); 
console.log(date.getTime()); 
$scope.date = date; 
$scope.person = [{name:'哪吒',age:3},
{name:'西门',age:17},
{name:'金1',age:38},
{name:'金2',age:18},
{name:'金3',age:8}]; $scope.up = $filter('uppercase')('hello');
$scope.time = $filter('date')($scope.date,'yyyy-MM-dd hh:mm:ss');
$scope.filter = $filter('filter')($scope.person,{'name': '西门'});
}]);//自定义过滤器 //第一个参数:过滤器的类型(名字)//第二个参数:函数,相当于执行函数app.filter('replace',function () {
//直接return//第一个参数相当于要过滤的数据//第二个参数是:后面的数据return function (input,n1) {if(n1 ==2){return input.replace(/hello/,'你好');}else if(n1==3){return input.replace(/hello/,'你不好');}}})</script>刷新数据  $apply$scope.$apply(function () {//需要刷新的内容});
监听数据的变化 $watch  以及 定时器的使用//定时器的使用注入  超时定时器/间歇定时器$interval   延迟定时器$timeout
app.controller('firstCtrl',['$scope','$interval',function ($scope,$interval) {$scope.count = 10;//定时器使用//第一个参数:执行函数//第二个参数:间隔时间(ms)var timer = $interval(function () {$scope.count--;},1000);//第一个参数:要监听的对象,对象是属性则以字符串的形式去写,对象是方法则以$scope.方法名//第二个参数:执行函数//newVal:变化后的值,oldVal:变化以前的值$scope.$watch('count',function (newVal,oldVal) {if (newVal == 0) {//关闭定时器$interval.cancel(timer);}})}])
简单的工具方法:  angular.方法
app.controller('firstCtrl',['$scope',function ($scope) {//判断是不是数组,返回值true或者falseconsole.log(angular.isArray([1,2,3]));console.log(angular.isDate(123));//将字符串转化为大写console.log(angular.uppercase('we are friend'));//两个参数,是比较的数据console.log(angular.equals(1,2));//.toJson将json对象转化为字符串var json = {name:'zs'};console.log(angular.toJson(json));//.fromJson将字符串转化为jsonvar stringJson = '{"name":"李四"}';console.log(angular.fromJson($scope.person));}]
复杂的工具方法: angular.方法   .forEach   .bind$scope.person = {name:'男神',age:18};$scope.data = [1,2,3,4];//第一个参数:要遍历的对象或者是数组
//第二个参数:执行函数,执行函数的第一个参数是value,第二个是key 
angular.forEach($scope.person,function (value,key) {
console.log(value,key); 
}); 
angular.forEach($scope.data,function (value,index) {console.log(value,index); 
}) 
//第一个参数相当于执行函数里面的this指向 
//p是个函数 
var p = angular.bind(person,function () { 
console.log(this); 
}); 
p();多个模块需手动加载: angular.bootstrap(DOM元素,['模块名'])或者也可以通过添加依赖的方式来加载其他模块//创建app1,app2两个模块//angular 只会自动加载一次模块,如果要加载其他模块,需要手动加载var app1 = angular.module('myApp1',[]);app1.controller('firstCtrl',['$scope',function ($scope) {$scope.name = '老王';}])var app2 = angular.module('myApp2',[]);app2.controller('secondCtrl',['$scope',function ($scope) {$scope.title = '老宋';}]);//手动加载模块//第一种方式:通过添加依赖的方式来加载其他模块var app1 = angular.module('myApp1',['myApp2']);//第二种angular.bootstrap(DOM元素,['模块名'])//先拿到模块所在的元素var div = document.getElementById('box');//第一个参数是DOM元素//第二个参数是数组.数组里面的元素是需要手动加载的模块名angular.bootstrap(div,['myApp2']);使用jQ创建内容 :
<body><div id="box"></div><div></div>
</body><script src="angular.js"></script>
<script src="jquery-3.1.0.js"></script><script>angular.module('myApp',[]).controller('firstCtrl',['$scope',function ($scope) {//第一中方式,使用jQuery方法调用,需导入jquery-3.1.0.js文件$('#box').html('这是jQ创建内容');//第二种方式,使用内置的jqLite调用jQuery的方法,不要导入jquery-3.1.0.js文件var div = document.getElementsByTagName('div')[1];angular.element(div).html('这是jqLite调用')}])
</script>----------------------------------------------------------------------------------------------------------
ng- 常用指令集合:
ng-click/dbclick: 单击/双击事件
ng-mousedown/up: 鼠标在指定的 HTML 元素上按下/松开鼠标按钮时 要执行的操作
ng-mousemove/over/out: 鼠标移动/移入/移出
ng-keydown/up/press: 在指定 HTML 元素上按下/抬起/按下时要执行 的操作(一般用于输入框)
ng-focus/blur: 输入框获得/失去焦点需要执行的操作
ng-submit: 表单提交后执行的函数 
ng-copy: 按下复制键的时候执行的事件 
ng-cut: 按下剪切键的时候执行的事件
ng-paste: 按下粘贴键的时候执行的事件 
ng-cloak: 在 angular 中为我们提供了 
ng-cloak 来实现防止闪烁的方案, 我们只需 要在需要的地方加上 ng-cloak。同时对于 bing 文字
({{ express }} )我们也可以改为 ng-bind 来实现避免<p ng-bind="title"></p>        
<p ng-cloak>{{title}}</p>
ng-non-bindable: 如果我们就想要一个{{}} 这样的内容就可以使用 ng- non-bindable ,原型 ”输出 ”
ng-disabled: 设置表单输入字段的 disabled 属性(input, select, 或 textarea),如果 ng-disabled 中的表达式返回 true 则表单字段将被禁用
ng-readonly: 用于设置表单域(input 或 textarea) 的 readonly 属性
ng-checked: 用于设置复选框(checkbox)或单选按钮(radio)的 checked 属性
ng-value: 用于设置 input 或 select 元素的 value 属性
ng-class: 用于给 HTML 元素动态绑定一个或多个 CSS 类 
ng-class-even: 为表格的偶数行设置 class 
ng-class-odd: 为表格的奇数行设置 class (从1开始)
ng-style: 为 HTML 元素添加 style 属性<div ng-style="{color:'red'}">开始一个人</div>
ng-href: 覆盖了原生的 <a> 元素 href 属性
ng-attr-(suffix): html属性多了,AngularJS 提供了一种通用的写法<p ng-attr-title="'事实'">我是女生</p>
ng-show: 值设置为 true 的时候显示元素
ng-hide: 值设置为 true 的时候隐藏元素 
ng-if: 值设置为 false 的时候删除元素 
ng-switch:指令根据表达式显示或隐藏对应的部分。 对应的子元素使用ng-switch-when 指令,如果匹配选中选择显示, 其他为匹配的则移除。
你可以通过使用ng-switch-default 指令设置默认选项,如果都没有 匹配的情况,默认选项会显示
<input type="checkbox" ng-model="box1">{{box1}} 
<div ng-switch="box1">        
<p ng-switch-default>switch默认</p>        
<p ng-switch-when="true">ng-switch为true</p>       
<p ng-switch-when="false">ng-switch为false</p>    
</div>
ng-open: 设置 details 列表的 open 属性
<input type="checkbox" ng-model="box2">{{box2}}    
<details ng-open="box2">       
<summary>总结</summary>        
<p>12345</p>    
</details>
ng-bind: 防止闪烁效果 <p ng-bind="title"></p>
ng-bind-template: 解决 ng-bind 只能绑定一个的问题 
<p ng-bind-template="{{title}} {{title1}}"></p>
ng-bind-html: 解析 html 代码(得导入 sanitize.js 文件,并给 app 添加 ngSanitize 依赖) 
ng-include: 加载外部页面(传入文件路径就行)  
//方法一 : 引进外部文件<div ng-include="'hhh.html'"></div>
//方法二:  <div ng-include="'tpl'"></div>    
<script type="text/ng-template" id="tpl">       
<h1>诠释所有</h1>    
</script>
ng-model-options: 控制双向事件绑定的时候,触发事件的方式 
updateOn: ‘blur’ 失去焦点时触发 
debounce : 1000ms即1秒后触发 
<div ng-model-options="{updateOn:'blur'}">        
<input type="text" ng-model="na">{{na}}    
</div>        
<div ng-model-options="{debounce:1000}">        
<input type="text" ng-model="na1">{{na1}}    
</div>

查看全文
如若内容造成侵权/违法违规/事实不符，请联系编程学习网邮箱：809451989@qq.com进行投诉反馈，一经查实，立即删除！

angular + ng-zorro 表格后台分页及排序功能实现，angular + ng-zorro 表格排序不起作用解决办法
angular ng-zorro 表格排序不起作用是因为数据是从后端获取的，也是后端分页，所以要自己写排序啦~~~~ 举例：HTML <nz-table #basicTable nzBordered [nzData]"listOfData" [nzTotal]"bottomTable.total"[nzPageSize…...
2024/5/6 15:58:46
angular（查询、删除、添加、排序）案例
添加部分未做判断，有需要的自己加一下就可以了 <!DOCTYPE html> <html><head><meta charset"utf-8" /><script type"text/javascript" src"js/jquery-3.2.1.min.js"></script><script type&q…...
2024/5/6 20:20:30
Angular 8 组件
创建一个组件独立模板 ng g c user-list内联模板 ng g c user-list -it显示值插值法 {{}}绑定值从数据流向划分为 3 种： 数据源 -> Template {{expression}}[target]“expression”bind-target“expression” Template -> 数据源 (target)“stat…...
2024/4/26 4:49:43
关于angularjs的orderby排序
包子君又来了，，，angularjs有一个非常强大的功能，那就是排序啦，其实也是算filter的一部分呢，包子刚刚做了一个排序，是按照公司的部门的数字大小排列的由于后台没传来标识，所以我前台…...
2024/4/28 10:55:32
Angular--返回数组内嵌套着数组排序法
// html文件 <nz-table #nzTable [nzData]"list"> <thead (nzSortChange)"sort($event)" nzSingleSort> <tr> <th nzShowSort nzSortKey"serIal"></th> <th nzShowSort nzSortKey"conCen"&…...
2024/5/6 0:51:56
angular入门--列表排序
首先，先上代码 <html ng-app"app1"><head><meta charsetutf-8 /><meta name"generator"content"HTML Tidy for HTML5 (experimental) for Windows https://github.com/w3c/tidy-html5/tree/c63cc39" /><t…...
2024/5/5 21:25:29
angular2项目本地部署
ng2项目部署1、ng build；2、打包完成后项目根目录下出现dist文件夹；复制dist到tomcat文件夹下；修改配置文件；文件里面默认有一个 <Service name"Catalina"></Service >标签；这里是两个&#xff…...
2024/5/5 20:47:57
如何将已构建的angular 网页项目部署到github pages供他人访问
1、将已构建完成的angular项目放到自己所创建github仓库中 1.1例如我已构建的项目名叫testRouter如下1.2 在我的 Hi 仓库中，可以看到我已经把我得 testRouter 已放在上面,2、需要修改testRouter文件中的index.html文件的 <base href"/"> 这一行,…...
2024/4/20 20:27:54
Angular6部署项目到服务器，第一次打开页面慢
Angular6项目打包命令ng build,这种打包的压缩包大小一般都会很大的，我推荐使用ng build --prod --aot,这种打包的方法可以大大压缩压缩包的大小，大概可以压缩60%，但是一般会出现一些语法上的报错，比如一个变量在html中声明&#…...
2024/4/20 16:00:57
angular部署到iis出现404解决方案
angular应用部署在iis上，刷新出现404 解决方案： 安装 iis URL Rewrite 模块，并在 src 目录下增加web.config，配置urlrewrite如下：<configuration> <system.webServer><rewrite><rules><rul…...
2024/5/5 20:17:21
Angular分模块部署到docker
以Portal与login模块为例子 Portal的Controller中： var nodeIp "localhost"; var htmldata <iframe height"1500" class"container col-sm-12 " style"border:0px " src"http:// nodeIp :3002/index">&…...
2024/5/5 23:58:25
利用docker中的nginx镜像部署angular项目
1、进入angular项目下的src文件加下：在命令行中执行:ng build --prod --aot 2、将生成的dist文件，通过Xftp传到服务器中 3、修改权限 4、进入到dist文件夹下的t-app文件夹下，执行dockers run命令 5、这样部署完之后，因为没有在ang…...
2024/5/5 19:25:29
【Docker】Angular部署
将angular项目部署到docker中去： 一、pull nginx镜像 docker pull nginx 二、运行nginx镜像 docker run --name nginx -d -p 8090:80 -v /root/iot/website:/usr/share/nginx/html nginx -v /xxxx/xx:/xxx/xx 挂载本地文件三、解决angular网站刷新404 cd /e…...
2024/4/20 20:27:49
Angular ng-build后放入Tomcat,刷新404，手动输入404
最近因为一些要求，需要将angular打包放入tomcat和后台丢入同一个地址下，发布后，访问网站，过程都正常，单当刷新网页的时候，就出现404页面同样，如果这个路由是你手动输入到浏览器的，也…...
2024/5/4 10:23:39
Angular2 将前端项目部署到服务器使用ip访问
Angular2 将项目(前后端)部署到服务器使用ip访问一、安装Nginx Nginx的安装配置二、前端部署Linux服务器： 使用build命令build项目. 环境可以自己设置. 命令如下: [开发环境]ng build --prod --envdev[测试环境]ng build --prod --envtest[生产环境]ng buil…...
2024/5/4 8:25:33
Docker部署Angular应用
写在最前面首先是我的目录结构你要新建的是Dockerfile和nginx-angular.conf Dockerfile 在 Angular 项目的根目录下面创建一个 Dockerfile 文件，内容如下 #设置一个基本的镜像，FROM 后面是镜像的名字，这个镜像是 Docker 官方提供的&…...
2024/4/21 2:17:13
Angular项目部署到一个IIS服务器上
refs: https://www.cnblogs.com/kingkangstudy/p/7699710.html https://blog.angularindepth.com/deploy-an-angular-application-to-iis-60a0897742e7?gi8dd3c96d6f8 1.安装URL rewrite组件： 网址：https://www.microsoft.com/en-us/download/details.…...
2024/5/2 9:26:06
angular nginx 部署优化
angular nginx 部署优化一、agular项目打包 1. ng build 打包 ， styles vendor 比较大，影响访问速度 chunk {main} main.js, main.js.map (main) 48.8 kB [initial] [rendered] chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 141 k…...
2024/4/21 2:17:11
Angular构建和部署
一.构建：编译和合并 1.什么是构建将编写的typescript源码变成可以直接放到web服务器上的静态资源构建包括：编译（将typescript编译成JavaScript）和合并（将所有资源整合到一起，减少应用启动时发送http请求…...
2024/5/2 16:02:54
angular9 ng start正常，build部署后无法正常加载页面
angular9 本地启动项目正常，构建部署后无法正常加载页面原因 index.html默认源码中 <base href/>如果项目没有部署在‘/’路径上则会无法加载页面其他资源文件解决修改index.html <base href./>或者使用以下命令构建项目 ng build --base-href…...
2024/5/2 16:35:09

Angular 笔记

相关文章

最新文章