I am working on a small AngularJS project. I used ui-router to route different html templates which works fine. The code and folder structure shows as below:
var app = angular.module('flapperNews', ['ui.router']);
app.config([
'$stateProvider',
'$urlRouterProvider',
function ($stateProvider, $urlRouterProvider) {
$stateProvider
.state('news', {
url: '/news',
templateUrl: 'news.html',
controller: 'MainCtrl'
})
.state('posts', {
url: '/posts/{id}',
templateUrl: 'posts.html',
controller: 'PostsCtrl'
});
$urlRouterProvider.otherwise('news');
}]);
Folder Structure:
However, when I tried to install them into the Nodejs/Expressjs, it shows the error: GET http://localhost:3000/news.html 404 (Not Found)
I have already put all html templates into the views folder shows as below, but doesn't work. I am new to NodeJS, anyone knows what happened? Thank you so much in advance!
Put all your HTML files in public folder and access all from there. Since Angular unable to get that pages from views folder since it's server side stuff.
Putting HTML files in public folder is not a standard but it's mostly used while using Angular
You can get more ideas from here with Jess answer
I think you just need /views/home.html in your templateUrl: and the views folder should be inside your public directory.
I assume you have something close to app.use(express.static(path.join(__dirname, 'public'))); somewhere? This is setting you up to display static files from within the public directory.
Related
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.
I am following a book called MEAN Machine. The code from the part in this book in question can be found at this Github Repo.
When clicking the links in /public/views/index.html which should be routed, I get file not found errors in the web browser.
The code (/public/js/app.routes.js) that does not seem to work:
// inject ngRoute for all our routing needs
angular.module('routerRoutes', ['ngRoute'])
// configure our routes
.config(function($routeProvider, $locationProvider) {
$routeProvider
// route for the home page
.when('/', {
templateUrl : 'views/pages/home.html',
controller : 'homeController',
controllerAs: 'home'
})
// route for the about page
.when('/about', {
templateUrl : 'views/pages/about.html',
controller : 'aboutController',
controllerAs: 'about'
})
// route for the contact page
.when('/contact', {
templateUrl : 'views/pages/contact.html',
controller : 'contactController',
controllerAs: 'contact'
});
$locationProvider.html5Mode(true);
});
In the index.html file, we are pointing to the correct files:
<script src="js/app.routes.js"></script>
<script src="js/app.js"></script>
To test their code, I changed the base tag in index.html to my folder's path which eliminated errors of not finding the above files.
Is this material dated? Also, I realize this book is not using Angular 2. Does Angular 2 vary drastically in routing and is this material deprecated?
Simply run command
node server.js
from '12-angular-routing' directory and open in browser http://localhost:8080
The problem is that browsers by default does not allow AJAX requests to files located on your local file system. In this case you should run your local server which serves client application(server.js is simple express server).
How can I load AngularJS templates from a Phoenix framework application? I am using the ui-router to load a template using templateUrl. This is with angular 1.5.
myAppModule.config(['$stateProvider', '$urlRouterProvider', '$httpProvider', function ($stateProvider, $urlRouterProvider, $httpProvider) {
$stateProvider
.state('event', {
url: '/event',
templateUrl: '/templates/event/event.html'
// template: '<h1>Stuff</h1>'
})
$urlRouterProvider.otherwise('/event');
}]);
Loading an inline template works, so it is clearly the mechanism for loading templates which I am struggling with.
Are there any settings in the brunch config I need to change?
Thank you
Eamon
Well, it's not too simple. I fall into the same problem, so here is my solution. Phoenix Framework has a directory where you can put your HTML files, the name of the directory is web/static/assets, you can set your files there, but if you need to create a directory like web/static/assets/templates you need to add exception in the endpoint.ex, like:
plug Plug.Static,
at: "/", from: :app, gzip: false,
only: ~w(css fonts images templates js favicon.ico robots.txt)
Now you can recompile and run your Elixir code and load your file like:
myAppModule.config(['$stateProvider', '$urlRouterProvider', '$httpProvider', function ($stateProvider, $urlRouterProvider, $httpProvider) {
$stateProvider
.state('event', {
url: '/event',
templateUrl: 'templates/event/event.html'
})
$urlRouterProvider.otherwise('/event');
}]);
I hope that works for you too.
I am running through a course at the moment on AngularJS and it has just introduced the concept of routing.
My problem is the app.config function is setup in app.js however, the function doesn't seem to ever be called and therefore the routes are not setup.
The common problem is the ngRoute not being declared however, it is. I'm not sure if there is a problem with the versions of Angular that I'm using but these were taken from the online course.
I have a public plnkr for anyone to view and have a look at http://plnkr.co/edit/L2FG4M?p=preview
(function() {
var app = angular.module("githubViewer", ["ngRoute"]);
app.config(function($routeProvider) {
// If we navigate to /main then the page used will be main.html and the controller
// MainController, if however something else is provided then we will
// redirect to /main as well
$routeProvider.when("/main", {
templateUrl: "main.html",
controller: "MainController"
})
.otherwise({
redirectTo: "/main"
});
});
}());
Any help is appreciated, I've exhausted my options now.
Thanks
Marc
In your MainController.js file, you defined a new module with same name as in app.js:
angular.module("githubViewer", []);
What you want to do is retrieve the already defined module. You can acheive that by removing the []:
angular.module("githubViewer");
Look here at the "Creation versus Retrieval" section.
I have an MVC 5 app with areas and I am trying to use the ui-router for AngularJs within one of my areas but I noticed that the templateUrl is wrong. It is trying to use a relative path but since I am using MVC routes and an Area the path to the template is incorrect.
The url to my area controller action is localhost:3789/Admin/UserManager .
The actual path is /Areas/Admin/Scripts/app/usermanager/partials/userlist.html .
angular.module("bsAdmin.userManager", ["ngResource", "ui.router", "ui.bootstrap", "bsPromiseTracker", "bsBusy", "angular-growl", "ngAnimate"])
.config(function ($stateProvider, $urlRouterProvider) {
// default state
$urlRouterProvider.otherwise("/userlist");
$stateProvider
.state('userlist', {
url: "/userlist",
templateUrl: "partials/userlist.html"
});
});
Angular ui-router tries to load the partial template using localhost:3789/Admin/partials/userlist.html
What are some techniques I can use so that the script will use the correct url to load the partial?
If your Angular javascript is in your .cshtml file, you can use the ASP.NET MVC URL helper to build the URL.
$stateProvider
.state('userlist', {
url: "/userlist",
templateUrl: "#Url.Content("~partials/userlist.html")"
});
});