加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 综合聚焦 > 服务器 > 安全 > 正文

学习angular.js的一些笔记想法(上)

发布时间:2020-12-17 10:36:59 所属栏目:安全 来源:网络整理
导读:1.data-ng-app与ng-app的区别 data-ng-app是为了h5不报错 ?2.ng-class 不多说就来拿例子说吧 html代码 = data-ng- = > js代码: $scope.colorChanger= ; 此时的变量colorChanger=false,那么!colorChanger=true,所以:‘color-changer-hiden':true;这时的div

1.data-ng-app与ng-app的区别

  data-ng-app是为了h5不报错

?2.ng-class

  不多说就来拿例子说吧

  html代码

= data-ng-=>

  js代码:

$scope.colorChanger=;

  此时的变量colorChanger=false,那么!colorChanger=true,所以:‘color-changer-hiden':true;这时的div就addClass这个color- changer-hiden,当‘color-changer-hiden':false是removeClass这个color- changer-hiden累;

  再比如说

  

$scope.lala = ;

  因为lala=true,所以div的class='haha';

哈哈 你懂了吗?反正我懂了哈

?3.$rootScope:

  首先,$scope是连接html跟javascript的纽带

  我们都知道angular.js有个$scope,哈哈,那么$rootScope的意思呢,$rootScope可作用于整个应用中,是各个controller中scope的桥梁。用于rootscope定义的值,可以在各个controller中应用,$rootScope是所有$scope的最上层  $rootscope可以作用于整个应用中,是各个controller中scope的桥梁,是贯穿各个controller的

4.数据绑定

  angular的数据绑定是{{}}双大括号,

  html代码:

type= data-ng-href= href=>

  js代码:

$rootScope.colors=

就给页面上的这个colors赋值了。

?5.ng-transclude

  (1)ng-transclude指明的是一个插入的位置,

  (2)指令中标签里的元素先删除然后被嵌入所包含的内容所替代

  好的上代码

  

> >

>{{text}}
js代码
app.directive(
<span style="color: #800000">'
<span style="color: #800000">pane<span style="color: #800000">'<span style="color: #000000">,function(){
<span style="color: #0000ff">return<span style="color: #000000"> {
restrict: <span style="color: #800000">'<span style="color: #800000">E<span style="color: #800000">'<span style="color: #000000">,transclude: <span style="color: #0000ff">true<span style="color: #000000">,scope: { title:<span style="color: #800000">'<span style="color: #800000">@<span style="color: #800000">'<span style="color: #000000"> },template: <span style="color: #800000">'<span style="color: #800000"><div style="border: 1px solid black;"><span style="color: #800000">' +
<span style="color: #800000">'<span style="color: #800000"><div style="background-color: gray"> {{title}}
<span style="color: #800000">' +
<span style="color: #800000">'<span style="color: #800000">
<span style="color: #800000">' +
<span style="color: #800000">'<span style="color: #800000"><span style="color: #800000">'<span style="color: #000000">
};
});

最后的效果

<div style=<span style="color: #800000">"<span style="color: #800000">border: 1px solid black;<span style="color: #800000">">
<div style=<span style="color: #800000">"<span style="color: #800000">background-color: gray<span style="color: #800000">">我是标题<span style="color: #000000">
我是内容

  这样看应该理解的差不多了哈

?6.path

path在我用到的时候的功能差不多相当于a标签的href属性

7.restrict:以my-menu为例

? ? ? ??                  E:element;A:attribute;C:class;M:注释的单词是啥啊,不知道为什么是M

8.directive:指令机制,上代码

>
<script src=<span style="color: #800000"&gt;"</span><span style="color: #800000"&gt;../angular-1.0.3/angular.min.js</span><span style="color: #800000"&gt;"</span>></script>
<script src=<span style="color: #800000"&gt;"</span><span style="color: #800000"&gt;HelloDirect.js</span><span style="color: #800000"&gt;"</span>></script>
appModule = angular.module(Hi there

结合7来看,就知道这个directive的指令是声明元素

9.transclude:上代码

> content= />
原始的内容,
还会在这里。
<script src=<span style="color: #800000"&gt;"</span><span style="color: #800000"&gt;../angular-1.0.3/angular.min.js</span><span style="color: #800000"&gt;"</span>></script>
<script src=<span style="color: #800000"&gt;"</span><span style="color: #800000"&gt;Transclude.js</span><span style="color: #800000"&gt;"</span>></script>
appModule = angular.module(Hi there

实现的效果为

总结就是:transclude: true,js代码里面的template会在内部出现是的子标签。

?10.当

js代码需要以下写法:

app.directive(

就是class里面的-线不要,js的写法是驼峰式,template是随便写的哈。

?11.$location.hash():得到或者设置url里的锚点部分

URL http: hash = "hashValue"

?$location.hash([id]):这条语句是快速定位页面为[id]的元素

12.

angular.module(.controller(<span style="color: #800000">'<span style="color: #800000">ScrollController<span style="color: #800000">',[<span style="color: #800000">'<span style="color: #800000">$scope<span style="color: #800000">',<span style="color: #800000">'<span style="color: #800000">$location<span style="color: #800000">',<span style="color: #800000">'<span style="color: #800000">$anchorScroll<span style="color: #800000">'<span style="color: #000000">,function ($scope,$location,$anchorScroll) {

$scope.gotoBottom </span>=<span style="color: #000000"&gt; function() {

  </span><span style="color: #008000"&gt;//</span><span style="color: #008000"&gt; 将location.hash的值设置为
  </span><span style="color: #008000"&gt;//</span><span style="color: #008000"&gt; 你想要滚动到的元素的id</span>
  $location.hash(<span style="color: #800000"&gt;'</span><span style="color: #800000"&gt;bottom</span><span style="color: #800000"&gt;'</span><span style="color: #000000"&gt;);

  </span><span style="color: #008000"&gt;//</span><span style="color: #008000"&gt; 调用 $anchorScroll()</span>

<span style="color: #000000"> $anchorScroll();

};

}]);

页面滚动到id='bottom'的位置。$anchorScroll();

?13.angular.element(element):angular获得页面元素,上代码

leftSide=angular.element(document.querySelector());

这个代码就是把class='left-side'的dom元素拿出来咯

?14.

app.config([

这段代码我一开始不知道什么意思,然后就去问问小伙伴,然后就得到了很好的解决,我就不多解释了,一个链接就能解决的问题啦,上链接

14:ng-include用于包含外部的文件

>

就是这个div里面是用于展示myFile.html的这个文件内容

?15.当html上有{{person}},然后js是$scope.person.name='wenwen'

那么页面上得到的效果就是:{'name':'wenwen'}一个json对象,哈哈

16.$watch:是一个scope函数,用于监听模型变化,当你的模型部分变化时它会通知你

每个参数的说明如下:

watchExpression:监听的对象,它可以是一个angular表达式如<span style="color: #800000">'<span style="color: #800000">name<span style="color: #800000">',或函数如function(){<span style="color: #0000ff">return<span style="color: #000000"> $scope.name}。

listener:当watchExpression变化时会被调用的函数或者表达式,它接收3个参数:newValue(新值),oldValue(旧值),scope(作用域的引用)

objectEquality:是否深度监听,如果设置为true,它告诉Angular检查所监控的对象中每一个属性的变化. 如果你希望监控数组的个别元素或者对象的属性而不是一个普通的值,那么你应该使用它

上代码

> > 表达式
> type= placeholder=/>
{{parseExpr}}

用了$watch监听input:ng-model='expr'的变化,然后parseExpr随着变化呗

17.数据绑定

>

<div ng-app=<span style="color: #800000">"">

名字 : ng-model=>

Hello {{name | uppercase}}

Hello SSSSS

?18.过滤器,简单的页面上的过滤器

>

<div ng-app=<span style="color: #800000">"">

名字 : ng-model=>

Hello {{name | uppercase}}

ng-model=>

{{numbers | number:}}

ng-model=>

{{n1 | currency}}

效果为:

再稍微复杂一点的就是要用到js的啦,首先来说一下orderBy:字面意思就是排序呗,上代码

<div ng-app="myApp" ng-controller="namesCtrl">

循环对象:

?效果就是:

hello,aweden
wenwen,china
world,denmark

看到没,是按country的首字母排序的,是的,就是这样过滤

现在再深入一点就是搜索啦,也是还可以啦,上代码

<div ng-app="myApp" ng-controller="namesCtrl">

输入过滤:

?效果为

一个简单的搜索框就出来了,不得不说很强大啊,加了filter|test咯,这个test就是绑定了输入框啦,so~~~你懂的

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!