Am new to Angular JS and trying to implement grunt-angular-templates. I have successfully concatenated all htmls's into one JS file.
My app.js file:
angular.module('LoginApp').config(function ($routeProvider
.when('/login', {
templateUrl: '/views/common/login.html',
controller: 'LoginCtrl'
})
.otherwise({
redirectTo: '/account'
});
);
So from here if i load http://localhost:50/login, i can see login page on the screen and referred from /views/common/login.html path.
I am trying to implement the same using $templateCache. I have all the htmls concatenated in a JS file. I need to refer templates from the common JS file. I have included the template JS file in the index.html
Concatenated JS file:
angular.module('LoginApp').run(["$templateCache", function($templateCache) {
$templateCache.put("../app/views/commmon/login.html",
// contents for login.html ...
);
}]);
My Gruntfile
ngtemplates: {
myapp: {
options: {
base: "web",
module: "LoginApp",
},
src: ['app/views/common/*.html'],
dest: 'dist/views/html.js'
}
},
How can i access/refer templates from $templateCache?
TIA
You don't have to use $templateCache manually. If your template is cached, Angular is going to load it automatically.
The templateUrl should be the ID of your cached template generated by Grunt.
See this Plunker http://plnkr.co/edit/132S5UMLnBzzGGGI85l3
index.html
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular-route.js"></script>
<script src="script.js"></script>
</head>
<body>
<div ng-view></div>
<script type="text/ng-template" id="login.html">
login.html
</script>
<script type="text/ng-template" id="account.html">
account.html
</script>
</body>
</html>
script.js
'use strict';
angular.module('sandbox', [
'ngRoute'
]).
config(['$routeProvider', function($routeProvider) {
$routeProvider
.when('/login', {
templateUrl: 'login.html'
})
.otherwise({
redirectTo: '/login'
});
}]);
Related
I'm trying to route a simple view in ASP.NET AngularJs app but the view not loading on the browser ngView is commented out in browser.
JavaScript
(function () {
"use strict";
angular.module("app-trips", ["simpleControls", "ngRoute"])
.config(function ($routeProvider) {
$routeProvider.when("/", {
$controller: "tripsController",
$controllerAs: "vm",
$templateUrl: "/views/tripsView.html"
});
$routeProvider.when("/editor", {
$controller: "tripEditorController",
$controllerAs: "vm",
$templateUrl: "/views/tripEditorView.html"
});
$routeProvider.otherwise({ redirectTo : "/"});
});
})();
CHTML
#model IEnumerable<App.Models.Trip>
#{
ViewBag.Title = "Home";
}
#section Scripts{
<script src="~/lib/angular/angular.min.js"></script>
<script src="~/lib/angular-route/angular-route.min.js"></script>
<script src="~/js/simpleControls.js"></script>
<script src="~/js/app-trips.js"></script>
<script src="~/js/tripsController.js"></script>
}
<div ng-app="app-trips">
<div ng-view></div>
</
Results
Remove $ sign from your $routeProvider route properties.
$routeProvider.when("/", {
controller: "tripsController",
controllerAs: "vm",
templateUrl: "/views/tripsView.html"
});
Note: If you're using .NET MVC project, you can't access html files directly from views
folder. I'd recommend to create a new folder and put static html files there.
I am trying to set up my ui-routes and it seems simple but I don't know what's wrong. I have the following example, making a simple web template with angular ui-router
<script src="./bower_components/angular/angular.min.js" >></script>
<script src="./bower_components/angular-bootstrap/ui-bootstrap.min.js" >></script>
<script src="./bower_components/angular-ui-router/release/angular-ui-router.min.js"></script>
<script src="./app/app.module.js"></script>
<script src="./app/app.route.js"></script>
I've written the app.module.js ,app.route.js and index.html something like this
app.module.js
'use strict';
angular.module('ezer',[ 'ui.router'
])
.controller('main-cntrl',['$scope','$rootScope','$state',function($scope,$rootScope,$state)
{
$scope.message = "abc";
}]);
app.route.js
angular.module('ezer')
.config(['$stateProvider','$urlRouterProvider',function($stateProvider,$urlRouterProvider) {
$urlRouterProvider.otherwise('/');
$stateProvider
.state('root',{
url: '',
views: {
'header': {
template: '<h1>My header</h1>',
controller: 'main-cntrl'
},
'footer':{
template : '<h1>My footer</h1>',
controller: 'main-cntrl'
}
}
})
}]);
index.html
<body ng-app="ezer" ng-controller="main-cntrl">
<div ui-view="header"></div>
<div ui-view="footer"></div>
</body>
In my console there are no errors at all.. I don't understand, what is the matter?
In your routes where you have the url, I think you should have 'url' : '/'.
in your app.route, the url should at least be '/' and not ''
I am trying to modularize the implementation of an angular js project. I am aiming to implement different controllers in their own js files. But that doesnt seem to work.
The following is my config.js ( where the primary module is also defined )
(function() {
var app= angular.module("spa", [
//oob angular modules
//3rd party modules
'ui.router',
'ui.bootstrap'
]);
app.config(['$stateProvider', '$urlRouterProvider', configRoutes]);
//function to config the routes
function configRoutes($stateProvider, $urlRouterProvider) {
$stateProvider
.state('dashboard', {
url: '/',
templateUrl: '../App/Views/dashboard.html',
controller: 'dashboardController',
controllerAs: 'vm'
})
.state('supplier', {
url: '/suppliers',
templateUrl: '../App/Views/supplier.html',
controller: 'supplierController',
controllerAs: 'vm'
})
.state('event', {
url: '/events',
templateUrl: '../App/Views/event.html',
controller: 'eventController',
controllerAs: 'vm'
})
.state('partner', {
url: '/partners',
templateUrl: '../App/Views/partner.html',
controller: 'partnerController',
controllerAs: 'vm'
})
$urlRouterProvider.otherwise('/');
}
app.controller('dashboardController', dashboardController)
function dashboardController() {
alert('dashboard-same function');
}
}());`
the dashboardController triggers fine. But other controllers, written in seperate files dont trigger.
(function () {
'use strict';
var app = angular.module('spa');
app.controller('eventController', eventController);
function eventController() {
alert('event');
}
});
This is the sequence of my references:
<!--External Libs-->
<script src="../Scripts/jquery-1.9.1.js"></script>
<script src="../Scripts/angular.js"></script>
<script src="../Scripts/angular-animate.js"></script>
<script src="../Scripts/angular-sanitize.js"></script>
<script src="../Scripts/angular-cookies.js"></script>
<script src="../Scripts/angular-ui-router.js"></script>
<script src="../Scripts/angular-ui/ui-bootstrap-tpls.min.js"></script>
<!--Jquery Plugins-->
<!--Custom Libs-->
<script src="../App/Common/config.js"></script>
<!--Controllers-->
<script src="../App/Controllers/event.js"></script>
<script src="../App/Controllers/partner.js"></script>
<script src="../App/Controllers/dashboard.js"></script>
<script src="../App/Controllers/supplier.js"></script>
Thanks in advance
As per my comment, you forgot to execute the wrapping function of eventController.js. It should be
(function () {
'use strict';
var app = angular.module('spa');
app.controller('eventController', eventController);
function eventController() {
alert('event');
}
})();
//^^--------You forgot these
If it doesn't work after said fix, please create a fiddle from your local code instead of the fiddle code to prevent any typo errors and I will take a look.
Also I don't see routes.js in your html, or maybe you meant config.html.
Not completely sure what is going wrong on your side, but here is an example of how I do it:
For example I am using the following setup for modularizing my AngularJS app (v1.3.6):
index.html:
<html>
<head>
<title>Modularize</title>
<!-- load module -->
<script src="app/app.js"></script>
<script src="app/app.constant.js"></script>
<script src="app/app.config.js"></script>
<script src="app/app.run.js"></script>
<!-- load controllers/services/directives/factories -->
<script src="app/controllers/MyController.js"></script>
</head>
<body>
<!-- REST OF THE APP -->
</body>
</html>
app.js
var myapp = angular.module('spa', ['ui.router']);
app.constant.js
myapp.constant(function () {
});
app.config.js
myapp.config(function ($stateProvider) {
$stateProvider
.state('home', {
url: '/home',
templateUrl: 'app/views/home.html',
controller: 'MyController',
});
});
app.run.js
myApp.run(function () {
});
MyController.js
myapp.controller('MyController', function ($scope) {
});
I would like to add new page into default ionic app with tabbed menu and display this page as the default page of the app.
Here is how I tried to do that:
I added new state into app.js
.state('home', {
url: '/home',
views: {
'home': {
templateUrl: 'templates/home.html',
controller: 'HomeCtrl'
}
}
})
and set default router to home page
$urlRouterProvider.otherwise('/home');
And template file:
<ion-view title="Home">
<ion-content class="padding">
<h1>Home page</h1>
</ion-content>
</ion-view>
Now, if I am trying to go to http://myapp.loc/index.html#/home I got always black page without content.
What I'm doing wrong?
Thanks for any help.
EDIT:
In order to Error: [ng:areq] Argument 'HomeCtrl' is not a function, got undefined
I'm adding related code.
Added controllers:
angular.module('starter.controllers', [])
.controller('HomeCtrl', function($scope, $location) {
})
.controller('DashCtrl', function($scope) {
})
.controller('FriendsCtrl', function($scope, Friends) {
$scope.friends = Friends.all();
})
.controller('FriendDetailCtrl', function($scope, $stateParams, Friends) {
$scope.friend = Friends.get($stateParams.friendId);
});
Order in index.html is following
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
<script src="js/controllers/overall_stats.js"></script>
<script src="js/services.js"></script>
I would say, that solution here should be surprisingly simple:
Remove the view name 'home'. In fact change it to '' (empty string)
There is a working plunker with this change?
.state('home', {
url: '/home',
views: {
// instead of this
// 'home': {
// use this
'': {
templateUrl: 'tpl.home.html',
controller: 'HomeCtrl',
}
}
})
Why? Because most likely the index.html would look like this:
<body ng-app="myApp" >
...
<ion-nav-view></ion-nav-view>
</body>
And that means that the view name is "", almost like <ion-nav-view name=""></ion-nav-view>
Check that in action here
EXTEND based on the question extension
if we use ionic-like approach with separated file and module for controllers:
// inside of the index.html
<script src="js/controllers.js"></script>
// the controller.js
angular.module('starter.controllers', [])
We must be sure, that our app.js does contain that module as well:
angular.module('myApp', [
'ionic',
'starter.controllers' // this is a MUST
])
Due This Article I try to create an application with AngularJS and RequireJS!
I can load angular library... create module and export it to external files! It's ok!
But the problem is I can't create configuration and controllers for my module both in main application file and external files!
Another issue is I can't load views and controllers in app.js via $routeProvider!!
(Sorry for grammer problems!)
app.js:
require.config({
baseUrl: "/angularjs/js",
paths: {
"angular": "libs/angular.min"
},
shim: {
"angular": {
exports: "angular"
}
}
});
define('app', ['angular'], function(angular){
var app = angular.module('myApp', []);
app.config(function($routeProvider, $locationProvider){
$routeProvider
.when('/', {
controller: 'HomeCtrl'
templateUrl: 'views/home.html'
});
});
return app;
});
require(["app", "controllers/homeController"]);
controllers/homeController.js:
require(["app"], function(app) {
app.controller("HomeCtrl",
function($scope) {
$scope.message = "Hello World!";
}
);
});
index.html:
<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="UTF-8" />
<title>Angular.js</title>
<script type="text/javascript" data-main="js/" src="js/libs/require.js"></script>
<script type="text/javascript" src="js/app.js"></script>
</head>
<body>
<div ng-view></div>
</body>
</html>
views/home.html:
<div ng-controller="HomeCtrl">
<h1>{{messge}}</h1>
</div>
Here is my version of your example. With a few changes it works fine.
It is better to bootstrap AngularJs application manually, when RequireJs.
I separated app.js file in two: main.js - with configuration of RequireJs and app.js - with AngularJs module declaration. Later, this module is used by homeController for declaration of controller. Then, the controller is required in main.js and the application is bootstrapping.
I do the angular and requireJS integration placing NG_DEFER_BOOTSTRAP! flag and have separate files for my app config and routing like in:
require.config({
baseUrl: 'js/',
paths: {
angular: '../lib/bower_components/angular/angular.min',
angularRoute: '../lib/bower_components/angular-route/angular-route.min'
},
shim: {
'angular': {
'exports': 'angular'
},
'angularRoute':{
'deps': ['angular']
}
},
priority: [
'angular'
]
});
//https://docs.angularjs.org/guide/bootstrap
window.name = 'NG_DEFER_BOOTSTRAP!';
require([
'angular',
'app',
'routes'
], function(angular, app, routes) {
'use strict';
var $html = angular.element(document.getElementsByTagName('html')[0]);
angular.element().ready(function() {
angular.resumeBootstrap([app['name']]);
});
});
app.js:
define([
'angular',
'filters',
'services',
'directives',
'controllers',
'animations',
'angularRoute'
], function (angular) {
'use strict';
return angular.module('myapp', [
'ngRoute',
'ngCookies',
'ngAnimate',
'myapp.services',
'myapp.directives',
'myapp.filters',
'myapp.controllers',
'myapp.animations'
]);
});
and routes.js:
define(['angular', 'app'], function(angular, app) {
'use strict';
return app.config(['$routeProvider', function($routeProvider) {
$routeProvider.
when('/home', {
templateUrl: 'partials/home.html',
controller: 'HomeCtrl'
}).
when('/login', {
templateUrl: 'partials/login.html',
controller: 'LoginCtrl'
}).
otherwise({
redirectTo: '/home'
});
}])
});
hope this helps in your scenario.