本文将为您提供关于AngularJS：打开html5mode(true)时,相对链接路径被破坏的详细介绍，我们还将为您解释javascript打开链接的相关知识，同时，我们还将为您提供关于Angula

本文将为您提供关于AngularJS：打开html5mode(true)时,相对链接路径被破坏的详细介绍，我们还将为您解释javascript 打开链接的相关知识，同时，我们还将为您提供关于Angular1位置html5mode等效于angular2、Angularjs $location html5mode浅析、AngularJS 1.2.0 ngBindHtml和trustAsHtml不能与ngModel一起使用、AngularJS HTML5Mode的实用信息。

• AngularJS：打开html5mode(true)时,相对链接路径被破坏（javascript 打开链接）
• Angular1位置html5mode等效于angular2
• Angularjs $location html5mode浅析
• AngularJS 1.2.0 ngBindHtml和trustAsHtml不能与ngModel一起使用
• AngularJS HTML5Mode

AngularJS：打开html5mode(true)时,相对链接路径被破坏（javascript 打开链接）

http://localhost:8000/locksmith-services

Cannot GET /locksmith-services

<base href="/"></base>

// App Starts
angular
    .module('app',[
        'ui.router','ngAnimate','angular-carousel'
    ])
    .config(['$urlRouterProvider','$stateProvider','$locationProvider',function($urlRouterProvider,$stateProvider,$locationProvider) {
        $urlRouterProvider.otherwise("/");

        $stateProvider
            .state('home',{
                url: '/',templateUrl: 'pages/home.html',controller: 'homeCtrl'
            })
            .state('services',{
                url: '/locksmith-services',templateUrl: 'pages/locksmith-services.html',controller: 'servicesCtrl'
            })
            .state('locations',{
                url: '/locksmith-locations',templateUrl: 'pages/locksmith-locations.html'
            })
            .state('payment',{
                url: '/locksmith-payment',templateUrl: 'pages/locksmith-payment.html'
            })
        // use the HTML5 History API
        $locationProvider.html5Mode(true);
    }])

<div>
    <a ui-sref="home">
        <img src="images/logo.png"https://www.jb51.cc/tag/logo/" target="_blank">logo" alt="Austin Texas Locksmith" />
    </a>
</div>
<nav>
    <aui-sref="services" ui-sref-active="active">Services</a>
    <aui-sref="locations" ui-sref-active="active">Locations</a>
    <aui-sref="payment" ui-sref-active="active">Payment</a>
</nav>

var express = require('express');
var app = express();

app.use(express.static(__dirname + '/front'));
var port = process.env.PORT || 8000;
app.listen(port);

var express = require('express');
var app = express();

app.use(express.static(__dirname + '/front'));
var port = process.env.PORT || 8000;
app.listen(port);

var express = require('express');
var app = express();

app.use('/js',express.static(__dirname + '/front/js'));
app.use('/build',express.static(__dirname + '/../build'));
app.use('/css',express.static(__dirname + '/front/css'));
app.use('/images',express.static(__dirname + '/front/images'));
app.use('/pages',express.static(__dirname + '/front/pages'));

app.all('/*',function(req,res,next) {
    // Just send the index.html for other files to support HTML5Mode
    res.sendFile('/front/index.html',{ root: __dirname });
});

var port = process.env.PORT || 8000;
app.listen(port);

Angular1位置html5mode等效于angular2

browserSync.instance = browserSync.init({
    server: {
      baseDir: ['app'],middleware: [
        proxyMiddleware,modRewrite([
          '^[^\\.]*$/index.html [L]'
        ])
      ]
    },});

Angularjs $location html5mode浅析

关于HTML5 history API

参考资料：http://diveintohtml5.info/history.html
参考资料为英文，内容较为简单，周末会做简单翻译，方便英语吃力的童鞋。

H5之前，一个URL对应一个页面，无论以何种方式修改地址栏地址，都会导致页面完全刷新，无论跳转页面之间是否有关联。简单来说，H5的history API提供接口，可以使用javascript修改地址栏路径，而不刷新页面。

使用场景

简化说明：未设置静态缓存。

假设后端数据输出模式为：获取数据---读取模板---渲染模板。不同页面之间共享模板，只是数据内容不同。在没有H5的新接口之前，不同页面之间的跳转，则相同的脚本，CSS文件会重新加载，不仅加剧服务器压力，在慢速网络下，用户体验也会变差。在有H5接口之后，不同路径跳转，可以拦截超链接默认行为，通过脚本控制地址栏，通过Ajax加载数据，在前端完成数据呈现，就能避免不必要的资源加载时间。

Demo浅析

• 数据源
  /static/articles/index.json;
  /static/articles/node.json;
  /static/articles/javascript.json

json// index.json
{
  "title": "Frontend develop language",
  "content": "FE encounter lots of trouble"
}
// node.json
{
  "title": "Node theme develop",
  "content": "whether believe or not, node changes frontend develop way"
}
// javascript.json
{
  "title": "Javascript theme develop",
  "content": "maybe javascript just tools, it enhance programmer skill"
}

• 模板
  /views/article.jade
  (临时看的jade，所以简单为上)

jadedoctype html
html
  head
     title Shuffle History
     script(src="/libs/superagent.js")
     script(src="/js/initialize.js") 
  body
     h3#title
       | #{title}
     p#content
       | #{content}
     p
       a(href="/") Index entrance
     p
       a(href="/node/" id="node") Node entrance
     p
       a(href="/javascript/" id="javascript") Javascript entrance

总计三个页面，共享同一个jade模板。数据源对应关系为
/ ---------- index.json
/node/ --- node.json
/javascript --- javascript.json

若直接访问/,/node/, javascript页面，express读取对应数据源，渲染模板，然后直接输出html，代码如下:

javascript/**
 * Created by jasonborn on 14/11/19.
 */
var jade = require(''jade'');
var path = require(''path'');
var express = require(''express'');
var app = express();
app.set(''env'', ''development'');
app.engine(''jade'', jade.__express);

app.get(''/'', function(req, res) {
  res.render(''article.jade'', require(''./static/articles/index.json''), function(err, html) {
    res.type(''html'');
    res.send(html);
  })
});

app.get(''/node/'', function(req, res) {
  res.render(''article.jade'', require(''./static/articles/node.json''), function(err, html) {
    res.type(''html'');
    res.send(html);
  })
});

app.get(''/javascript/'', function(req, res) {
  res.render(''article.jade'', require(''./static/articles/javascript.json''), function(err, html) {
    res.type(''html'');
    res.send(html);
  })
});

app.use(express.static(path.join(__dirname, ''static'')));

app.listen(1336);

自此实现所谓的MVC模式，然后使用H5 history API，所有的页面都会加载initilize.js脚本文件：

javascript/**
 * Created by jasonborn on 14/11/20.
 */

window.onload = function() {
  var title = document.querySelector(''#title'');
  var content = document.querySelector(''#content'');
  var node = document.querySelector(''#node'');
  var javascript = document.querySelector(''#javascript'');
  var resolveContent = function(target) {
    switch (true) {
      case target === ''/'':
            target = ''/articles/index.json'';
            break;
      case /node/.test(target):
            target = ''/articles/node.json'';
            break;
      case /javascript/.test(target):
            target = ''/articles/javascript.json'';
            break;
    }

    superagent
        .get(target)
        .end(function(err, res) {
          title.textContent = res.body.title;
          content.textContent = res.body.content;
        })
  };

  window.history.replaceState({
    "target": window.location.pathname
  }, null, ''./'');

  window.onpopstate = function(event) {
    resolveContent(event.state.target);
  };

  node.addEventListener(''click'', function(event) {
    event.preventDefault();

    window.history.pushState({
      "target": "/node/"
    }, null, ''/node/'');

    resolveContent(''/node/'');

    window.onpopstate = function(event) {
      resolveContent(event.state.target);
    };
  });

  javascript.addEventListener(''click'', function(event) {
    event.preventDefault();

    window.history.pushState({
      "target": "/javascript/"
    }, null, ''/javascript/'');

    resolveContent(''/javascript/'');

    window.onpopstate = function(event) {
      resolveContent(event.state.target);
    };
  });
};

pushState修改地址记录，onpopstate表示通过后退方式退回pushState后的路径时，执行何种操作。这里是通过Ajax请求拉取数据，然后呈现数据（较大型项目可能会使用前后端模板引擎来渲染，例如x-template)。

Angularjs $location html5mode

开启html5mode，通过config来配置即可。

javascriptangular.module(''shuffleApp'', [''ngRoute'', ''ngSanitize''])
    .config([''$routeProvider'', ''$locationProvider'', function($routeProvider, $locationProvider) {
        $routeProvider
            .when(''/love'', {
                template:''<a href="/hate">To hate</a><p ng-bind="love"></p>'',
                controller: ''LoveCtrl''
            })
            .when(''/hate'', {
                template: ''<a href="/love">To love</a><p ng-bind="hate"></p>'',
                controller: ''HateCtrl''
            })
            .otherwise(''/love'');
        $locationProvider.html5Mode(true);
    }]);

上述配置，在加载入口文件之后，地址栏会变为http://hostname/love，而不是http://hostname/#/love。但是存在一个问题，后者可以直接访问，前者也许能访问，也许不能，但不会出现预期的结果，典型结果就是NG中文API站，每次向在新页面打开某个链接，结果就是华丽丽的报错，例如：http://docs.angularjs.cn/api，所以需要做重定向：

javascriptapp.get(''/love'', function(req, res) {
    res.sendFile(path.join(__dirname, ''static/index.html''));
});

具体的重定向上会导致路径设计上的一些问题，所以需要注意。

联系方式

QQ: 491229492
github: https://github.com/bornkiller

AngularJS 1.2.0 ngBindHtml和trustAsHtml不能与ngModel一起使用

var myApp = angular.module('myApp',[]);

function myController($scope,$sce){
    $scope.myHtml = $sce.trustAsHtml($scope.sourceText);
}

<html ng-app="myApp">

  <head>
    <script data-require="angular.js@1.2.0-rc3" data-semver="1.2.0-rc3-nonmin" src="http://code.angularjs.org/1.2.0-rc.3/angular.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body>
    <div ng-controller="myController">
      <textarea ng-model="sourceText"></textarea>

      <div ng-bind-html="myHtml"></div>
    </div>
  </body>

</html>

// would strongly suggest including sanitize in your scripts and injecting it
// into your app here to prevent "unsafe as safe" errors
var myApp = angular.module('myApp',['ngSanitize']);

myApp.controller('myController',['$scope','$sce',function myController($scope,$sce){
  $scope.myHtml = "initial";  //not needed,for testing

  $scope.changeText = function() {
    $scope.myHtml = $sce.trustAsHtml($scope.sourceText);
  }
}]);

<head>
    <script data-require="angular.js@1.2.0-rc3" data-semver="1.2.0-rc3-nonmin" src="http://code.angularjs.org/1.2.0-rc.3/angular.js"></script>
    <script src="http://code.angularjs.org/1.2.0-rc.3/angular-sanitize.min.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body>
    <div ng-controller="myController">
      <textarea ng-model="sourceText" ng-change="changeText()"></textarea>

      <div ng-bind-html="myHtml"></div>
    </div>
  </body>

</html>

AngularJS HTML5Mode

"rewrites": [ {
    "source": "**","destination": "/index.html"
} ]

$npm update -g firebase-tools

关于AngularJS：打开html5mode(true)时,相对链接路径被破坏和javascript 打开链接的介绍已经告一段落，感谢您的耐心阅读，如果想了解更多关于Angular1位置html5mode等效于angular2、Angularjs $location html5mode浅析、AngularJS 1.2.0 ngBindHtml和trustAsHtml不能与ngModel一起使用、AngularJS HTML5Mode的相关信息，请在本站寻找。