I am using gulp to add my templates into the production js file so I can access them via $templateCache. Everything works well for my directives but the templates in my state provider are not working. Its seems like the $templateCache object is not available.
Concatenated JS File. This is placed at the bottom of the file:
angular.module("barmehealth").run(["$templateCache",
function($templateCache {
$templateCache.put("app/views/register.html","<div>Register</div>");
$templateCache.put("app/modules/framework/framework.template.html","<div class>Framework Template</div>");
}
]);
I have tried both approaches below and neither work. Also there is no error. The view simply loads the index page with just gives me duplicated content.
Using templateUrl
(function () {
'use strict';
angular.module('barmehealth', ['framework', 'ui.router'])
.config(function($urlRouterProvider, $stateProvider) {
$urlRouterProvider.otherwise('/');
$stateProvider
.state('register', {
url: '/register',
templateProvider: function($templateCache) {
return $templateCache.get('/app/views/register.html');
}
});
});
}());
Using templateProvider
(function () {
'use strict';
angular.module('barmehealth', ['framework', 'ui.router'])
.config(function($urlRouterProvider, $stateProvider) {
$urlRouterProvider.otherwise('/');
$stateProvider
.state('register', {
url: '/register',
templateUrl: '/app/views/register.html'
});
});
}());
You have added extra / (slash) which isn't required there, by removing it you can desired template in templateProvider function.
Use
return $templateCache.get('app/views/register.html');
Instead of
return $templateCache.get('/app/views/register.html');
Related
I treid to make a contoller for each of my page but have a broblem. Mistakes in console, and the elements of controller don`t work on html page.
I use $stateProvider cod below is the cod of config, it`s work normal.
var app = angular.module("appmyApp", ['ui.router']);
app.config(['$stateProvider', '$urlRouterProvider', '$locationProvider',
function ($stateProvider, $urlRouterProvider, $locationProvider) {
// For any unmatched url, redirect to root
$urlRouterProvider.otherwise("/");
$stateProvider
.state('header', {
abstract: true,
templateUrl: '/app/pages/header.html'
})
.state('home', {
url: '/',
templateUrl: 'app/pages/home.html',
controller: 'HomeController'
})
}]);
When I add in the config the row - controller: 'HomeController'. I have a mistake in console.
angularjs.js:127 Error: [$controller:ctrlreg]
http://errors.angularjs.org/1.7.5/$controller/ctrlreg?p0=HomeController
at angularjs.js:7
at angularjs.js:97
at Object.<anonymous> (viewDirective.ts:410)
at angularjs.js:17
at Ba (angularjs.js:89)
at q (angularjs.js:73)
at g (angularjs.js:64)
at angularjs.js:64
at angularjs.js:69
at n (viewDirective.ts:328) "<div ui-view="" class="ng-scope">"
When I delete it, it is not any mostakes in console.
.state('home', {
url: '/',
templateUrl: 'app/pages/home.html'
})
In both case page opens good. Route is work. But controller is not work.
The cod of controller
var app = angular.module("appTradeRoom", []);
app.controller("HomeController", function ($scope) {
$scope.name = "Hello";
});
But on the view I have this.
http://prntscr.com/lzeyy5
Scripts home-controller.js I added in the head of home.html
<script src="/app/pages/home-controller.js"></script>
I added ng-controller="HomeController" to body in html page home.html but it does not work. What a problem. I Use last angularJS
Here is the reference on index.html
http://prntscr.com/lzf0cd
Change:
var app = angular.module("appTradeRoom", []);
app.controller("HomeController", function ($scope) {
To
var app = angular.module("appTradeRoom");
// ^^ no dependencies
app.controller("HomeController", function ($scope) {
When there are no dependencies angular.module() will act as a getter of existing module, otherwise it will create a new one
I am building an angular app with several modules close to john papas styleguide. Following that, I have several independent modules with their own route definitions and others with interceptors. My Problem is: when I run it on Cordova / Android, state definitions only seem to work, when I put them in the main module. In my Browser the work. Did anybody come over this issue yet?
E.g. this works on both local browser and on device with cordova:
//main.js
'use strict';
angular.module('main', [
'app.core',
'auth'
])
.config(function ($stateProvider, $urlRouterProvider) {
// ROUTING with ui.router
$urlRouterProvider.otherwise('/main/list');
$stateProvider
// this state is placed in the <ion-nav-view> in the index.html
.state('main', {
url: '/main',
abstract: true,
templateUrl: 'main/templates/menu.html',
controller: 'MenuCtrl as menu'
})
.state('main.login', {
url: '/login',
views: {
'pageContent': {
templateUrl: 'auth/templates/auth.login.html',
controller: 'LoginCtrl'
}
}
})
/* more states here */
This only works in local browser (main module same as above):
//auth.routes.js
'use strict';
angular
.module('auth.routes')
.config(config);
function config ($stateProvider) {
$stateProvider
.state('main.login', {
url: '/login',
views: {
'pageContent': {
templateUrl: 'auth/templates/auth.login.html',
controller: 'LoginCtrl'
}
}
})
}
//auth.module.js
'use strict';
angular.module('auth', [
'app.core',
'auth.constants',
'auth.routes',
'auth.controllers',
'auth.services',
'auth.interceptors',
'auth.config'
]);
angular.module('auth.constants', []);
angular.module('auth.routes', []);
angular.module('auth.controllers', []);
angular.module('auth.services', []);
angular.module('auth.interceptors', []);
angular.module('auth.config', []);
Error says that the state was not found on navigation.
Try
angular
.module('test', [])
.config(config);
config.$inject = ['$routeProvider'];
function config($routeProvider) {
$routeProvider
.when('/login', {
title: 'Calculators',
templateUrl: 'modules/views/login.html',
controller: ''
});
}
remove state provider ,check for simple routing it will work.
I am trying to create a new state in angular using ngRouter.
I have an index.route.js file that contains the following:
(function() {
'use strict';
angular
.module('testApp')
.config(routeConfig);
/** #ngInject */
function routeConfig($stateProvider, $urlRouterProvider) {
$stateProvider
.state('home', {
url: '/',
templateUrl: 'app/main/main.html',
controller: 'MainCtrl'
})
.state('tools', {
url: '/tools/:category',
templateUrl: 'app/tools/tools.html',
controller: 'ToolsCtrl',
controllerAs: 'tsCtrl'
});
$urlRouterProvider.otherwise('/');
}
})();
Then, I have created a tools.html and a tools.controller.html.
tools.html:
Hello World
tools.controller.js:
(function(){
'use strict';
angular
.module('testApp')
.controller('ToolsCtrl', ToolsController);
/** #ngInject */
function ToolsController(){
var ctrl = this;
ctrl.tools = {};
//TBD: more code.
}
})();
The problem is that whenever I go to for example http://localhost:3000/tools/maps, the browser complains that it can't find some of the js files that are suppose to be linked to the project. Now, the link it shows contains the state, for example instead of searching for bootstrap in http://localhost:3000/app/index.route.js it searches for it in http://localhost:3000/tools/app/index.route.js. Why is that?
I have used Yeoman with the gulp-angular generator in order to create the project.
i am trying to move my old angular system to angular modular system(detailed info in :johnpapa/angular-styleguide ยท GitHub).
I see no error on console or somewhere else but still ui-router doesn't to its job..
routes.js
(function() {
'use strict';
angular
.module('app')
.config(routeConf);
function routeConf($urlRouterProvider, $stateProvider) {
$urlRouterProvider.otherwise('/');
$stateProvider
.state('mainMenu', {
//url: '/index',//causes navigation problems
templateUrl: 'testing/pages/mainmenu.html',
})
.state('index', {
//url: '/start',//causes navigation problems
templateUrl: 'try.html',
})
.state('terminal', {
//url: '/start',//causes navigation problems
templateUrl: 'testing/pages/terminal.html',
});
}
})();
and script.js(app)
(function() {
'use strict';
angular
.module('app', [
'ui.router'
]);
})();
http://plnkr.co/edit/VzAsH61OaZ97tyMhKkDJ?p=preview
You didn't initialize angular. You need to put something like:
<html ng-app="app">
http://plnkr.co/edit/NzqnTwkk1SqkTfwAWvQM?p=preview
Also, you actually have to put something at the default route - in this case '/'.
So I directed your 'try.html' page to that spot.
.state('index', {
url: '/',
templateUrl: 'try.html',
})
Every example I've looked at has made use of the ng-controller directive to get things working.
The Todo MVC example at https://github.com/tastejs/todomvc/tree/gh-pages/examples/angularjs creates a 'TodoCtrl' controller. But in the corresponding index.html, there is no use of the ng-controller directive.
How is this possible? and why did they choose to do it this way?
It uses the ngRoute provider.
angular.module('todomvc', ['ngRoute'])
.config(function ($routeProvider) {
'use strict';
var routeConfig = {
controller: 'TodoCtrl',//add controller to view
templateUrl: 'todomvc-index.html',
resolve: {
store: function (todoStorage) {
// Get the correct module (API or localStorage).
return todoStorage.then(function (module) {
module.get(); // Fetch the todo records in the background.
return module;
});
}
}
};
$routeProvider
.when('/', routeConfig)
.when('/:status', routeConfig)
.otherwise({
redirectTo: '/'
});
});