I'm trying to use ngInclude to load an header template which is common to all my views. Problem is I'm using RequireJS to lazy load my app.
So my code looks like:
index.html
<!doctype html>
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" id="ng-app" ng-app=""> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9" id="ng-app" ng-app=""> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" ng-app> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body ng-app="testApp">
<header ng-include="views/common/header/header.html"></header>
<div class="container" ng-view></div>
<script src="bower_components/requirejs/require.js" data-main="scripts/bootstrap.js"></script>
</body>
</html>
bootstrap.js
require.config({
paths: {
angular: '../../bower_components/angular/angular',
angularRoute: '../../bower_components/angular-route/angular-route',
angularCookies: '../../bower_components/angular-cookies/angular-cookies',
angularMocks: '../../bower_components/angular-mocks/angular-mocks',
text: '../../bower_components/requirejs-text/text'
},
shim: {
'angular' : {'exports' : 'angular'},
'angularRoute': ['angular'],
'angularCookies': ['angular'],
'angularMocks': {
deps:['angular'],
'exports':'angular.mock'
}
},
priority: [
'angular'
]
});
//http://code.angularjs.org/1.2.1/docs/guide/bootstrap#overview_deferred-bootstrap
window.name = 'NG_DEFER_BOOTSTRAP!';
require([
'angular',
'app',
'angularRoute',
'angularCookies'
], function(angular, app, ngRoutes, ngCookies) {
'use strict';
var $html = angular.element(document.getElementsByTagName('html')[0]);
angular.element().ready(function() {
angular.resumeBootstrap([app['name']]);
});
});
app.js
/* global controllers:false */
define([
'angular',
'controllers/main',
'common/header/HeaderModule'
], function (angular, MainCtrl, HeaderModule) {
'use strict';
return angular.module('testApp', [
'testApp.controllers.MainCtrl',
'testApp.Header',
/*angJSDeps*/
'ngCookies',
'ngRoute'
])
.config(function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'views/main.html',
controller: 'MainCtrl'
})
.otherwise({
redirectTo: '/'
});
});
});
HeaderModule.js
define([
'angular',
'common/menu/menuItems'
], function (angular, MenuItemsController) {
'use strict';
angular.module('testApp.Header', [])
.controller('MenuItemsController', MenuItemsController);
});
menuItems.js
define(['angular'], function (angular) {
'use strict';
angular.module('testApp.menu.controllers.MenuItemsController', [])
.controller('MenuItemsController', function ($scope) {
$scope.items = [
'Menu1',
'Menu2'
];
});
});
header.html
<nav ng-controller="MenuItemsController">
<ul>
<li ng-repeat="item in items">{{ item }}</li>
</ul>
</nav>
This gives no error but also doesn't show the header view - I'm guessing due to the the template not being loaded. Any idea on what I'm missing here?
Thanks
As it turns out I just forgot to wrap the path with single quotes...
<header ng-include="'views/common/header/header.html'"></header>
Related
I am making a small application in angular to study, but the directive and the view are not being rendered, I already investigated my code, but I did not find anything, code can be seen below:
Index.html
<!DOCTYPE html>
<html lang="pt-br" ng-app="rdi_music">
<head>
<base href="/">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Carregando CSS -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/bootstrap-overloads.css">
<!--Carregando os scripts-->
<!-- App core -->
<script src="js/core/angular.min.js"></script>
<script src="js/core/angular-animate.min.js"></script>
<script src="js/core/angular-sanitize.min.js"></script>
<script src="js/core/angular-route.min.js"></script>
<script src="js/core/angular-resource.min.js"></script>
<script src="js/ui/ui-bootstrap-tpls-2.5.0.min.js"></script>
<!-- My Modules -->
<script src="js/main.js"></script>
<script src="js/controllers/index-controller.js"></script>
<script src="js/controllers/musicas-controller.js"></script>
<!-- My Directives -->
<script src="js/directives/header.js"></script>
<title>Music</title>
</head>
<body>
<header-menu></header-menu>
<div class="container">
<ng-view></ng-view>
</div>
</body>
</html>
main.js
angular.module('rdi_music', ['ngRoute', 'ngResource', 'musicasController',
'header'])
.config(function($routeProvider, $locationProvider){
$locationProvider.html5Mode(true);
$routeProvider.when('/musicas',{
templateUrl: 'views/musicas/index.html',
controller: 'musicasController'
});
});
index-controller.js
angular.module('rdi_music', ['ngAnimate', 'ngSanitize', 'ui.bootstrap'])
.controller('indexController',function($scope){
$scope.isNavCollapsed = true;
$scope.isCollapsed = true;
$scope.isCollapsedHorizontal = true;
});
musicas-controller.js
angular.module('rdi_music', ['ui.bootstrap'])
.controller('musicasController', function($scope){
});
header.js
angular.module('header', ['ui.bootstrap'])
.directive('headerMenu', function(){
var ddo = {
restrict: "AE",
templateUrl: "views/directives/header.html"
};
return ddo;
});
once the module injected to the angular.module no need to inject them again. Just get the reference only.
remove the 'musicasController' from the module injector. Controllers don't need to inject to the modules
angular.module('rdi_music', ['ngRoute', 'ngResource',
'header'])
.config(function($routeProvider, $locationProvider){
$locationProvider.html5Mode(true);
$routeProvider.when('/musicas',{
templateUrl: 'views/musicas/index.html',
controller: 'musicasController'
});
});
index-controller.js
angular.module('rdi_music')
.controller('indexController',function($scope){
$scope.isNavCollapsed = true;
$scope.isCollapsed = true;
$scope.isCollapsedHorizontal = true;
});
musicas-controller.js
angular.module('rdi_music')
.controller('musicasController', function($scope){
});
Demo
Could someone help me on this. I am trying to use Angular Material with requirejs. But its not working. Here is the code I used:
index.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link href="bower_components/angular-material/angular-material.css" rel="stylesheet" />
</head>
<body ng-app="StarterApp" ng-controller="AppCtrl">
<md-select placeholder="Pick" ng-model="someVal">
<md-option value="1">One</md-option>
<md-option value="2">Two</md-option>
</md-select>
</body>
<script data-main="main" src="require.js"></script>
</html>
main.js
require.config({
baseUrl: "",
paths: {
'app': 'app',
'angular': 'bower_components/angular/angular',
'ngAnimate': 'bower_components/angular-animate/angular-animate.min',
'ngAria': 'bower_components/angular-aria/angular-aria.min',
'ngMaterial': 'bower_components/angular-material/angular-material.min'
},
shim: {
'ngAnimate': ['angular'],
'ngAria': ['angular'],
'ngMaterial': {
deps: ['ngAnimate', 'ngAria']
}
},
deps: ['app']
});
app.js
"use strict";
define(['angular', 'ngMaterial'], function () {
var app = angular.module('StarterApp', ['ngMaterial']);
app.controller('AppCtrl', ['$scope', function ($scope) {
}]);
});
A similar question was already asked here, and I followed by using hammerjs proxy but I am still getting the same error. :(
Click Here To See The Error Screenshot
I found the answer at the link.
Changes in index.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link href="bower_components/angular-material/angular-material.css" rel="stylesheet" />
</head>
<body ng-controller="AppCtrl">
<md-select placeholder="Pick" ng-model="someVal">
<md-option value="1">One</md-option>
<md-option value="2">Two</md-option>
</md-select>
</body>
<script data-main="main" src="require.js"></script>
</html>
Changes in app.js
"use strict";
define(['angular', 'ngMaterial'], function () {
var app = angular.module('StarterApp', ['ngMaterial']);
app.controller('AppCtrl', ['$scope', function ($scope) {
}]);
angular.bootstrap(document.getElementsByTagName("body")[0], ['StarterApp']);
return app;
});
I'm just starting with angular.js and I watched some older tuts. where ng-route was not a dependency, so I have changed my code and added <script src="js/vendor/angular-route.js"></script> in html, but I'm getting the same error Unknown provider: $templateRequestProvider <- $templateRequest <- $route <- ngViewDirective
HTML:
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>test</title>
<link rel="stylesheet" href="css/foundation.css" />
<link rel="stylesheet" href="css/main.css" />
<script src="js/vendor/modernizr.js"></script>
<script src="js/vendor/angular.js"></script>
<script src="js/vendor/angular-route.js"></script>
<script src="js/vendor/main.js"></script>
</head>
<body>
<div ng-app="app">
<ng-view></ng-view>
</div>
</body>
</html>
JS:
var app = angular.module("app", ['ngRoute']);
app.config(['$routeProvider', function($routeProvider){
$routeProvider.when("/",{
templateUrl: "templates/home.html",
controller: "AppCtrl"
}
);
}]);
app.controller("AppCtrl", function($scope){
$scope.model = {
message: "This is my app!!!"
}
});
home.html:
<h1>{{model.message}}</h1>
I met the issue when using angular-route 1.3.14 and angular 1.2.14 , You need to upgrade angular to version required by angular-route . Here the bower of angular-route 1.3.14 , it require angular 1.3.14.
{
"name": "angular-route",
"version": "1.3.14",
"main": "./angular-route.js",
"ignore": [],
"dependencies": {
"angular": "1.3.14"
},
"homepage": "https://github.com/angular/bower-angular-route",
"_release": "1.3.14",
"_resolution": {
"type": "version",
"tag": "v1.3.14",
"commit": "a405245afdb0f1eac5aad4d8ddc555ed557b3345"
},
"_source": "git://github.com/angular/bower-angular-route.git",
"_target": "1.3.14",
"_originalSource": "angular-route"
}
I have a situation. I'm currently testing out angularjs routing abilities with angular-route. But when I take out the HTML snippet code out of the index.html and put it in a views folder and call it from a routeprovider it doesn't seem to work.I've checked my console and there is no errors. I'm working from MAMP for my webserver.
My NET Tab
My Console
Here is my index.html
<!DOCTYPE html>
<html lang="en" data-ng-app="customersApp">
<head>
<meta charset="UTF-8">
<title>Weather</title>
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0, minimal-ui">
<!--[if lt IE 8]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please upgrade your browser to improve your experience.</p>
<![endif]-->
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400italic,400,600,700,800,300' rel='stylesheet' type='text/css'>
</head>
<body>
<div ng-view></div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular.min.js"></script>
<script src="scripts/angular-route.js"></script>
<script src="app/app.js"></script>
<script src="app/controllers/customersController.js"></script>
</body>
</html>
Here is my app.js
(function(){
var app = angular.module("customersApp", ['ngRoute']);
app.config(function($routeProvider) {
$routeProvider
.when('/',{
controller: 'CustomersController',
templateUrl: 'app/views/customers.html'
})
.otherwise({redirectTo: '/'});
});
}());
and Finally my customersController.js
(function(){
var CustomersController = function ($scope){
$scope.sortBy = 'name';
$scope.reverse = false;
$scope.customers = [
{
joined: "2004-12-24",
name: "Charles",
city: "Fairfax",
orderTotal: "124.45"
},
{
joined: "2023-09-12",
name: "Donte",
city: "Altamonte Springs",
orderTotal: "5.9943"
},
{
joined: "2013-01-25",
name: "Jelon",
city: "Waldorf",
orderTotal: "100"
}
],
$scope.doSort = function(propName){
$scope.sortBy = propName;
$scope.reverse = !$scope.reverse;
};
};
angular.module("customersApp").controller("CustomersController", ['$scope',CustomersController]);
}());
It's probably this in customersController.js
angular.module("customersApp", [])
Get rid of the second argument as it recreates the module. It should be
angular.module('customerApp').controller(...
See https://docs.angularjs.org/api/ng/function/angular.module#usage
So on load to the base page, I'm expecting the page to redirect to: http://myurl.com/index.php#/search
Currently nothing happens...any ideas?
<!doctype html>
<html ng-app="appDep">
<head>
<meta charset="utf-8">
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.3/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.3/angular-route.js"></script>
<script>
var app = angular.module('appDep', ['ngRoute']);
app.config([ '$routeProvider', function($routeProvider) {
$routeProvider.when('/search/:sig?', {
templateUrl: 'blablabla',
controller : 'notYetCreated'
}).otherwise({
redirectTo : '/search'
});
} ]);
app.controller('notYetCreated', function($scope,$log,$http,$q,$routeParams, $location) {
console.log('test')
});
</script>
</head>
<body>
HI
<script type="text/ng-template" id="blablabla">
TEST
</script>
</body>
</html>
Add <div ng-view></div>