发表新帖
发表新帖

Couldn't load template using templateUrl in Angularjs

后端 未结
关注
4 1057
南笙
南笙 2020-12-02 18:32

I am just learning Angularjs, and how to use templateUrl to load a template.

I have a simple directive:

var mainApp = angular.module(\"mainApp\", [])
相关标签:
4条回答
  • 清酒与你
    2020-12-02 19:05

    If you have Node and NPM installed then run: npm install http-server -g

    Then navigate to the folder containing your app and run: http-server

    I found my answer in this SO post: Quick Node Server

    You can download Node here (NPM comes with Node): Node

    Hope this helps!

    0 讨论(0)
  • 夕颜
    2020-12-02 19:19

    The problem is that you are running your example off the file system (using the file:// protocol) and many browsers (Chrome, Opera) restricts XHR calls when using the file:// protocol. AngularJS templates are downloaded via XHR and this, combined with the usage of the file:// protocol results in the error you are getting.

    You've got several options when it comes to resolving this situation:

    • Run your examples using a web server (there are many easy solutions like https://code.google.com/p/mongoose/ or a few lines node.js script)
    • Embed templates in your index.html file using the <script> directive: http://docs.angularjs.org/api/ng.directive:script so your templates are downloaded with the main HTML file and it is no longer necessary to load them via XHR
    • Change your browser settings to allow XHR calls over the file:// protocol. For example this can be done in Chrome like so: Allow Google Chrome to use XMLHttpRequest to load a URL from a local file
    0 讨论(0)
  • 野趣味
    2020-12-02 19:22

    Chrome does not allow ajax requests on the file: protocol.

    Take a look at: Google Chrome --allow-file-access-from-files disabled for Chrome Beta 8 for a workaround, or you could run a web server on your computer.

    0 讨论(0)
  • 礼貌的吻别
    2020-12-02 19:22

    You can also use the expressjs web server to load your index.html file. Install express server npm install express -S

    server.js file

    const express = require('express')
const  path = require('path');

const app = express();

    load angularjs files by specifying the path

    NOTE: Assuming your angular files( module/controller/directive files and the index.html file) are inside a public directory.

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

    listen (start app with node server.js)

    app.listen(8080, () => console.log('App listening on port 8080'));

    package.json file

    {

  "scripts": {
    "dev": "node server.js"
  },
  "dependencies": {
    "express": "^4.16.4"
  },
}

    Run npm run dev to start server.

    public/index.html file

    <!DOCTYPE html>
<html ng-app="mainApp">
    <head>
        <script src="js/jquery-2.0.0.js"></script>
        <script src="js/angular.js"></script>

        <link href="css/bootstrap.css" rel="stylesheet" />
        <script src="js/bootstrap.js"></script>

        <script src="js/main.js"></script>

        <style type="text/css">
            div {
                background-color: cornflowerblue;
            }

            #appPanel {
                width: 900px;
                height: 1000px;
            }

        </style>
    </head>
    <body>
        <div id="appPanel"  class="container">
            <div class="row-fluid" style="height: 15%">
                <div class="span12">
                    title
                </div>
            </div>
            <div class="row-fluid" style="height: 85%">
                <div class="span3" style="height: 100%">
                    actions
                </div>
                <div class="span9" style="height: 100%"  ng-controller="AppCtrl">
                    <div ng-repeat="request in data.requests">
                        <request data="request"></request>
                    </div>
                </div>
            </div>
        </div>
    </body>
</html>
    0 讨论(0)
 看不清?
提交回复
热议问题