AngularJS怎么做SEO

Javascript框架在处理seo方面存在问题，因为爬虫在检索seo信息的时候会读不了js给其赋的值，导致搜索引擎收录不了或者收录了无效的信息,比如收录的可能是title={{title}}这样的，下面先说如何在路由跳转时修改页面的seo信息，现在spa跳转一般用route-ui了，就以这个为基础讲解，在app

js配置项state中加入title信息，如下：data:{pageTitle:'usertitle'}

state('index

user',{url:'/user',views:{'content@index':{templateUrl:'templateHtml/user/user

html',controller:'userCtrl'}},data:{pageTitle:'usertitle'}})

state('index

user

a',{url:'/a',templateUrl:'templateHtml/user/a

html',data:{pageTitle:'useratitle'}})

state('index

user

b',{url:'/b',templateUrl:'templateHtml/user/b

html',data:{pageTitle:'userbtitle'}})然后使用通过监听$stateChangeSuccess来修改页面title:app

directive('title',['$rootScope','$timeout',function($rootScope,$timeout){return{link:function(){varlistener=function(event,toState){console

log(toState);$timeout(function(){$rootScope

title=(toState

data&&toState

data

pageTitle)toState

data

pageTitle:'Defaulttitle';$rootScope

metakeywords="thisiskeywords"});};$rootScope

$on('$stateChangeSuccess',listener);}};}]);这里赋值是通过获取当前state中设置的title，也就是这里toState对象的值，当我们打印这个toState时就会发现：这里是获取的已经设置好的data中pageTitle的值，如果不想写在state里或者写死，可以传state中的唯一标示，配合后台接口，将查询的title渲染到页面；同样meta标签如keywords、description可以在此时一同绑定；上面说到javascript框架在seo方面存在短板，应对ng的这个问题市面上也有很多方案,比如prerender，seo

js等，思想都是在页面加入表示，让爬虫在页面渲染好后才去扒数据，同时服务器上要配置些服务，服务将检测是否有对应这个URL的快照或者缓存的页面，如果存在就发给爬虫，如果不存在，则生成快照，然后发送正确的页面给爬虫；处理起来还是要费些功夫的，所以也可以采用ng+常规的开发模式，一些重要的页面不要用这种页面渲染seo的方式，或者建立专门的seo信息页；所以在这方面感觉用ng框架做app（ionic）还是很合适的；以上所述是小编给大家介绍的Angular设置title信息解决SEO方面存在问题，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的

在此也非常感谢大家对脚本之家网站的支持！

首先来进行一个最基本的定义，由于我们需要数据绑定功能，我们将从一开始就require ngModel:

directive('timePicker',function(){ var today = new Date(new Date()toString()); return { require: 'ngModel', link: function($scope,$element,$attrs,ngModel){ } }});

注意到我们需要涉及元素的实际实例，因此我们所有的代码基本上都位于linking函数中，我们在此完全不需要担心编译过程。我们同事也实例化了一个today变量来保存一个Date对象，以此在午夜十分更新。创建这个变量作为factory函数的一部分允许我们在多个实例之间分享一个today变量。注意，尽管这允许我们将内存的使用最小化，它也意味着如果我们的应用在半夜还依然再运行，我们的指令会开始提供不准确的结果。如果你打算将这个指令用于一个实时应用中，你最好创建另一个函数在第二天来临时更新这个值。现在，我们急需要看我们的controller函数：

link: function($scope$element,$attrs,ngModel){ ngModel = ngModel || { "$setViewValue" : angularnoop }}

你以前可能也注意过这种模式。

$watch 方法在用的时候主要是手动的监听一个对象，但对象发生变化时触发某个事件。

需要被检测的对象,可以是以下任意一种:

1某个数据,监测这个数据的值是否发生变化；

2一条angular表达式,监测表达式的结果是否发生变化；

3函数(),监测函数的返回值是否发生变化；

注意:以上都是字符串格式,并且都是在 $scope 作用域下执行的。

监听到变化时执行的函数。

1newValue: watchObj的新的值；

2oldValue: watchObj的旧的值；

3scope: 就是当前控制器的 $scope ；

注意:函数或者表达式不是在 $scope 作用域下执行的,所以,如果是需要调用当前作用域下的某个函数,应该是 scopewatchCallback

布尔值，是否深度监听。

ifDeep值设置为true, 那么angular会检测被监控对象的每个属性是否发生了变化。

1$watch 单一的变量

2$watch 多个变量

3$watch对象或数组

4$watch 函数的返回结果

1 $observe 是angular指令中link函数第三个参数 ( attrs ) 的一个方法 只能在指令的link函数中使用它 它是通过 $evalAsync 函数实现监控的。

2 $watchGroup 是用来监听一组表达式。数组中任意表达式的变化都会触发监听函数。

3 $watchCollection 用来监听一个对象（包括数组）， 当这个对象的任意属性发生变化时，触发监听函数。和 $watch 一样，第一次参数可以是一个返回一个对象的函数。

4 $observe, $watch, $watchGroup, $watchCollection 都返回一个移除监听的函数。当需要取消监听的时候，直接调用。

1 $parse,$eval 这两个函数都可以解析表达式的值。它们的区别在于 $parse 是一个服务，可以注入使用。 $eval 是 $scope 对象上的一个方法，我们只能在能访问 $scope 的场景下使用它。

2 $evalAsync 和 $eval 一样用来解析表达式的值。但它并不会立刻计算表达式的值，而是将表达式缓存起来，等到下一次 $digest （脏检查 ）的时候执行。以获取更好的性能。

angularjs怎么获得ng-model里的value下面一个例子：

姓名：<input type="text" ng-model="name">

<br>

性别：<input type="radio" name="sex" value="男" ng-model="sex">男

<input type="radio" name="sex" value="女" ng-model="sex">女

<br>

兴趣：<input type="checkbox" name="interest" ng-model="interest1" ng-true-value="游泳" ng-false-value="无选中兴趣1">游泳

<input type="checkbox" name="interest" ng-model="interest2" ng-true-value="旅游" ng-false-value="无选中兴趣2">旅游

<input type="checkbox" name="interest" ng-model="interest3" ng-true-value="打篮球" ng-false-value="无选中兴趣3">打篮球

<br><br>

<fieldset>

<legend>{{name}}的基本信息如下：</legend>

<br>

性别：{{sex}}

<br>

兴趣爱好：{{interest1}} {{interest2}} {{interest3}}

</fieldset>

AngularJS表达式：

1AngularJS 表达式写在双大括号内:{{ expression }}。

2AngularJS 表达式把数据绑定到 HTML，这与ng-bind指令有异曲同工之妙。

3AngularJS 将在表达式书写的位置"输出"数据。

4AngularJS 表达式很像JavaScript 表达式:它们可以包含文字、运算符和变量。

用法如下：

forin 语句用于遍历数组或者对象的属性（对数组或者对象的属性进行循环 *** 作）。

for in 循环中的代码每执行一次，就会对数组的元素或者对象的属性进行一次 *** 作。

1 $render用处就是：

  在$viewValue改变的时候可以重新绑定model数据，主要使用在自定义指令的时候，但是我们要注意一点在$viewValue改变的时候可以重新绑定model数据，

  但是我们要注意一点($viewValue和DOM节点的value是不同的)，我觉得他们的区别有点类似setTimeout和$timeout的区别，但是又不太一样。

  ps:其实modelValue和绑定的数据也可以不同

2ngModelController则是ng-model指令中所定义的controller，

  在ngModelController中有两个很重要的属性，一个叫做$viewValue，一个叫做$modeValue。

  $viewValue：指令渲染模板所用的值，$viewValue属性保存着更新视图所需的实际字符串

  $modeValue:指控制器中流通的值，modelValue由数据模型持有。$modelValue和$viewValue可能是不同的，取决于$parser流水线是否对其进行了 *** 作。

  于此相关的另外两个指令：$parses和$formatters

  $parses的作用是：将$viewValue->$modelValue

  $formatters的作用是：将$modelValue->$viewValue

3$apply的作用: $apply()函数可以从Angular框架的外部让表达式在Angular上下文内部执行,Scope提供$apply方法传播Model的变化。

              在apply()方法里面，它会去调用scopedigest()方法，apply()方法带一个函数或者一个表达式，然后执行它，

  最后调用scopedigest()方法去更新bindings或者watchers。

  $apply()方法可以在angular框架之外执行angular JS的表达式。

  在$apply方法中提到过脏检查，首先apply方法会触发evel方法，当evel方法解析成功后，会去触发digest方法，digest方法会触发watch方法

  scopedigest(): 用于检查绑定的数据到底有没有发生变化。

4watch方法用法：

语法：

$watch(watchFn,watchAction,deepWatch)

三个参数：

watchFn:angular表达式或函数的字符串

watchAction(newValue,oldValue,scope):watchFn发生变化会被调用，是一个函数

deepWatch：可选的布尔值命令检查被监控的对象的每个属性是否发生变化

$watch会返回一个函数，想要注销这个watch可以使用函数，true/false

5angularJS——自定义服务provider之$get

  可以认为provider有三个部分：

  第一部分是私有变量和私有函数，这些变量和函数会在以后被修改。

  第二部分是在appconfig函数里可以访问的变量和函数，所以，他们可以在其他地方使用之前被修改。注意，这些变量和函数一定要添加到this上面才行。

  第三部分是在控制器里可以访问的变量和函数，通过$get函数返回。

  当使用 provider创建服务的时候，唯一可以让控制器访问的属性和方法是在$get()函数里返回的属性和方法。

  使用Provider的优点就是，你可以在Provider对象传递到应用程序的其他部分之前在appconfig函数中对其进行修改。

  当你使用Provider创建一个service时，唯一的可以在你的控制器中访问的属性和方法是通过$get()函数返回内容。

  大型数据进行访问的时候许多大型互联网站都是为全球用户提供服务的，

  用户分布范围广，各地网络情况千差万别。在国内，还有各个运营商网络互通难的问题。

  使用在具体的环境中，

6angularjs中的run（）方法使用

  run方法用于初始化全局的数据，仅对全局作用域起作用。

例子：

<script type="text/javascript">

  var m1 = angularmodule('myApp',[]);

  m1run(['$rootScope',function($rootScope){

  $rootScopename = 'hello';

  }]);

  consolelog( m1 );

</script>

7config方法

在模块加载阶段，对模块进行自定义配置

config可以注入$stateProvider, $urlRouterProvider, $controllerProvider, $provide, $>

以上就是关于AngularJS怎么做SEO全部的内容，包括:AngularJS怎么做SEO、angularJS与如何与原生对象交互、angularJS 里的$watch的用法等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！