Anguilar 1.5.*
I can not get angular to use my template cache. I gave it a invalid path name on purpose so I would get html file not found. But instead it is not using template cache and just requesting the html files.
templates.js
angular.module("gulpTemplates", []).run(["$templateCache", function($templateCache) { $templateCache.put("aaaa/views/examples.html"
...
app.js
var gulpNewy =
angular
.module('gulpNewy', ['ngRoute', 'gulpTemplates'])
.config(function($routeProvider) {
$routeProvider
.when('/home', {
templateUrl: 'views/home.html',
controller: 'homeCtrl'
})
.when('/examples', {
templateUrl: 'views/examples.html'
})
.when('/screen-shots', {
templateUrl: 'views/screen-shots.html'
})
index.html
<div class="col-xs-12" ng-view></div>
What am I doing wrong?
Ok, I found the issue.
If you are using ng-view, templateCache will not work by default for you. This is because with ng-view you do not need to use ng-include. templateCache needs to be used with ng-include or $templateCache.get.
Regardless of $templateCache.get, ng-view will not look in templateCache.
Related
I have an older app (Angular 1.5.3) and I would like to take advantage of angular-ui-router and components for a few of my pages.
Is it possible to use the old routeProvider in conjunction with the stateProvider that ui-router provides?
IE I would like to transition a few pages to use components here and there as I get time, while leaving the rest.
I am pretty sure using ng-view and ui-view I am having a hard time getting that to work (probably cause you are not supposed to do that). Does that mean I have to transition my entire project from routeProvider to stateProvider all at once?
Is it possible to use the old routeProvider in conjunction with the
stateProvider that ui-router provides?
Short answer
No. Similar structure but different syntax
Long answer
No, but ... You can easily convert ng-view to ui-view a.e. from $routeProvider to $stateProvider.
Consider example ng-view:
$routeProvider
.when('/Book/Add', {
template: '<div class="box" ng-class="classname">Add</div>',
controller: function($scope) {$scope.classname="add"}
})
.when('/Book/Error', {
templateUrl : 'error.html',
controller: 'ErrorController'
})
.otherwise({redirectTo: '/Book/Error'});
Consider example ui-view:
$stateProvider
.state('book', {
url: '/Book',
abstract: true,
templateUrl: 'views/Book.html'
})
.state('book.add', {
url: '/inbox',
template: '<div class="box" ng-class="classname">Add</div>',
controller: function($scope) {$scope.classname="add"}
})
.state('book.error', {
url: '/Error',
templateUrl : 'error.html',
controller: 'ErrorController'
})
$urlRouterProvider.otherwise(function ($injector, $location) {
return '/Book/Error';
});
Keep in mind that routing syntax will change too.
For example:
if ($state.current.name === 'login') {
$state.go('book.add', {});
}
Instead Add we will write <a ui-sref="book.add">Add</a>
And so on ......
As you can see, the syntax is a bit similar. I'm sure you will find a lot of references about power of $stateProvider. For example https://stackoverflow.com/a/21024270/1631379
Hope I answered on your question
I have
<base href="/!#/">
at the top of my index.html file. When I go to URL http://localhost:5000/ everything works fine, it instantly add #!/ so the URL is http://localhost:5000/#!/ and page display as expected.
At the server side I have following code which should allow me to use my files
app.use(express.static(path.join(__dirname, 'public')));
Structure of my files is something like:
bookApp(folder)
server.js
public(folder)
index.html
app.js(ngRoute)
views(folder)
css(folder)
controllers(folder)
and my AngularJS routing is:
(function () {
'use strict';
angular
.module('app', [
'ngRoute'
])
.config(config);
function config ($routeProvider) {
$routeProvider
.when('/', {
controller: 'PostsCtrl',
templateUrl: 'views/posts.html'
})
.when('/register', {
controller: 'registerCtrl',
templateUrl: 'views/register.html'
})
.when('/login', {
controller: 'loginCtrl',
templateUrl: 'views/login.html'
})
.otherwise('/');
}
})();
The very first page (views/posts.html) load as expected but when I click
<li>Sign in</li>
the URL is http://localhost:5000/login not as like I thought http://localhost:5000/!#/login.
and it display:
Cannot GET /login
when I manually change URL to http://localhost:5000/#!/login it works fine.
How to fix this behavior?
The only solution I see is to get rid of <base> tag and in every link manually in href directive add !# before slash.
It looks like you are forgetting the ng-view directive: <div ng-view></div> which is the container for the content that is provided by your routing. Place this above your script if you have everything contained in one file.
You can also try:
<ng-view></ng-view>
<div class="ng-view"></div>
Is there any particular reason you are still using Angular 1? I know this isn't technically answering your question, but I would highly recommend that you start using the latest Angular. You can still keep legacy code but it will make a lot of what you are doing a lot cleaner and clear.
When I use ngView and call a controller inside another one, this makes any process twice :
$routeProvider
.when('/', {
templateUrl: '/main.html',
controller: 'main'
})
.when('/user', {
templateUrl: '/user.html',
controller: 'user'
})
});
<body ng-controller="main">
<div ng-view><!--here is another controller --></div>
</body>
When using ngInclude there is not this problem. What is wrong with using ngView?
It looks like if you are using your main controller twice:
By referencing it in the template as ng-controller
In the routing config of the "/" route
Probably you want remove the ng-controller from your index page?
Like in title, I can't load a template correctly. I can't understand where the problem is, the only error that I got is "Error: [$compile:tpload] Failed to load template: /testingBlock.html"
Paths:
/mainDirOfTheProject
/application
/library
/webroot
/javascript: [angularjs.js, angular-route.js, app.js]
index.html
testBlock.html
HTML(index.html):
<body ng-app="App" ng-controller="MainCTRL as ctrl">
{{ctrl.nameApp}}
<div ng-view></div>
</body>
HTML(testingBlock.html):
<h1>Just a test</h1>
Javascript (app.js):
angular
.module("App", ["ngRoute"])
.config(config)
.controller("MainCTRL", MainCTRL);
function MainCTRL($location){
this.nameApp = "myApp";
}
function config($routeProvider, $locationProvider){
$routeProvider
.when("/",{
templateUrl: "/testingBlock.html",
controller: "MainCTRL"
})
.otherwise({redirectTo:"/"});
$locationProvider.html5Mode({enabled:true, requireBase:false});
}
I sorted it out: the problem was that the routing doesn't accept HTML file but HTM file.
I tried with jQuery ajax call, and it was the same.
So the question is, why jQuery ajax call doesn't accept .html files?
Try to use a dot in front of the slash :
templateUrl: "./testBlock.html",
Should be able to load it relative to the path of your main index.html, try:
templateUrl: "testBlock.html",
If that doesn't work, watch the network tab in your browser dev tools and see what path it's trying to load your template from, and adjust as needed.
I'm trying to get ui-router to properly work with nested ui-view elements but I'm having trouble getting the nested view to actually render. Here's my code:
app.js
'use strict';
var lunchrApp = angular.module('lunchr', ['ui.router', 'lunchrControllers']);
lunchrApp.config(['$stateProvider', '$urlRouterProvider', '$locationProvider',
function ($stateProvider, $urlRouterProvider, $locationProvider) {
$urlRouterProvider.otherwise('/');
$stateProvider.
state('mainPage', {
url: '/',
templateUrl: '/partials/main.jade',
controller: 'MainPageController'
})
.state('users', {
url: '/users',
templateUrl: '/partials/users.jade',
controller: 'UserController'
})
.state('users.matching', {
url: '/matching',
templateUrl: '/partials/users.matching.jade'
})
.state('users.matched', {
url: '/matched',
templateUrl: '/partials/users.matched.jade'
})
.state('register', {
url:'/register',
templateUrl: 'partials/register.jade',
controller: 'RegisterController'
});
$locationProvider.html5Mode(true);
}]);
Here's /partials/users.jade (which gets properly displayed in the div(ui-view) in the body tag)
div(class='container')
h1 Welcome
p(ng-repeat='user in users').
Username: {{user.email}}
Firstname: {{user.firstname}}
Lastname {{user.lastname}}
a(ui-sref='users.matching', class='btn btn-default') Start matching me!
a(ui-sref='users.matched', class='btn btn-default') Simulate a match!
div(ui-view)
Here are partials/users.matching.jade
div
h1 We're matching you!
and partials/user.matched.jade
div
h1 You've been matched!
I can successfully navigate to http://localhost:3000/users/matched but when I do, the html is identical to when I go to http://localhost:3000/users.
Why isn't the nested ui-view being correctly populated?
TL;DR
Just put
doctype html
at the top of the jade file that contains <div ui-view>.
If you want more info, there are a number of pretty easy solutions.
More details
The issue basically comes down to the fact that jade is outputting
<div ui-view="ui-view">
which angular can't understand. So you have to make some changes to the output so it's something angular can consume.
Option 1
IMHO, the simplest option would be to put
doctype html
at the top of the jade file that contains <div ui-view>. You must do this even if your jade file is contained within another file that already has doctype html.
Option 2
You can write
.div(ui-view="")
instead of
div(ui-view)
This forces jade to output <div ui-view>.
Option 3
Angular will be fine if you specify a class named ui-view on your div:
<div class="ui-view">
Option 4
Maybe the hackiest way would be to write the raw HTML like this:
<div ui-view>
That makes jade output it exactly the way you typed it.