I am new to angularjs, was just trying to build a CRUD app with it.
My code is like this http://jsfiddle.net/fpnna/1/
And I am using apache as webserver, when turing on the
$locationProvider.html5mode(true);
then getting
uncaught TypeError: Object #<Ic> has no method 'html5mode' from testApp
When I am clicking to "Add new" the path changing to "/new" but getting error
404 The requested URL /new was not found on this server.
Any idea where I am doing wrong.
I went through the official manual, couldn't figure it out.
Thanks in advance.
You have a couple issues, first in jsfiddle you don't need the body tags plus you have multiple body tags. Also your fiddle has two ng-apps, the routes are defined incorrectly (should be /new for instance), invalid ng-view closing tag, there should only be one. You should include the javascript with No wrap in head and lastly it is html5Mode with a capital M on the mode and none of your partials exist at their urls nor are they defined as local scripts.
I would suggest you use plunkr as it allows you to add other local files, ie your partials which don't exist in the fiddle.
I've cleaned up all of the issues on this plunkr: http://plnkr.co/edit/A23Fxn9Ji02TGZ0jouZR?p=preview
angular.module('testApp', []).
config(function ($routeProvider, $locationProvider) {
$locationProvider.html5Mode(true); // case is important
$routeProvider.
when("/", {
templateUrl: "list.html"
}).
when("/new", { // make sure and use absolute link to route
templateUrl: "edit.html"
})
})
function testCtrl($scope) {
$scope.persons = [{
name: "X"
}, {
name: "Y"
}, {
name: "Z"
}]
}
and the html:
<body ng-controller="testCtrl" >
<div class="main-nav"> Add Me
</div>INDEX
<div >
<div ng-view>
</div>
</div>
</body>
Please review the documentation and tutorials to learn the basics on setting up a project. http://docs.angularjs.org/guide/bootstrap
Related
I'm learning AngularJS with Spring Boot. I have created a SpringBoot project and imported it into Eclipse and without writing any Java code I'm trying to make AngularJS front end template work with routing. I have necessary angular scripts included in the project and I'm doing everything as in tutorials on w3schools and on spring website. The same code works fine if I create a very simple app using just html and js not using any IDE, but it fails in Eclipse.
The project directory in Eclipse:
-src/main/java
|-com.package
|---Application.java
|---ViewController.java
-src/main/resources
|---static
|-----app
|------app.module.js
|-----angular-route.min.js
|-----angular.min.js
|-----angular.min.js.map
|-----style.css
|---templates
|-----first.html
|-----index.html
|-----main.html
|-----second.html
Navigation in index.html:
<body ng-app="app">
<header class="header">
<a ng-href="#/!">Main</a>
<a ng-href="#!first">First</a>
</header>
<div>
<ng-view></ng-view>
</div>
</body>
app.module.js
var app = angular.module('app', ['ngRoute']);
app.config(function($routeProvider) {
$routeProvider
.when('/', {
template: 'main.html'
})
.when("/first", {
templateUrl: "first.html"
})
.when('/second', {
templateUrl: 'second.html'
})
.otherwise({redirectTo: '/'});
});
As in case of the first route within app.config , it will work fine in each case if I use template instead of templateUrl.
In case of each of the .html templates they contain some dummy code for example:
<p>first</p>
When I check in dev-tools, in the Network tab I can see 404 as a response for a request for a template. In the Console I can see the error message as follows.
Error: "[$templateRequest:tpload] http://errors.angularjs.org/1.7.8/$templateRequest/tpload?p0=%2Fsrc%2Fmain%2Fresources%2Ftemplates%2Ffirst.html&p1=404&p2="
From AngularJS website I learned it means there's something wrong with the path. I tried to modify the path as in "/first.html", "./first.html", "/templates/first.html" but the result was the same.
I do not understand what the issue is. Any help will be appreciated.
EDIT: I thought it might be useful to add the code for ViewController.java:
#Controller
public class ViewController {
#RequestMapping("/")
public String index() {
return "index";
}
}
Thanks for any suggestions.
Everything worked fine - I mean the navigation - as soon as I moved all html files into src/main/resource/static folder within the project in Eclipse.
So the project structure should be like this:
-src/main/java
|-com.package
|--Application.java
|--ViewController.java
-src/main/resources
|-static
|--app
|----app.module.js
|--angular-route.min.js
|--angular.min.js
|--angular.min.js.map
|--first.html
|--index.html
|--main.html
|--second.html
|--style.css
|-templates
I have a JavaScript web app where I used AngularJS to ease things up, but now I bumped into a little problem.
I want to change viewfrom an ng-controller. I use $location.path to do this, but sadly, nothing happens. If I check the $location object, the path will be changed correctly, but the view isn't changing.
I have an ng-view in my Home.html. This is the config I wrote for it:
<html ng-app="app">
...
<body>
<div id="navigation-menu" ng-controller="NavigatorController">
<a class="menulink" ng-class="{ active: isActive('/labels')}" href="#page2">Page2</a>
<a class="menulink" ng-class="{ active: isActive('/labels')}" href="#page3">Page3</a>
</div>
<div ng-view></div>
</body>
</html>
This is the config I made for the $routeProvider which works flawlessly when used in the menusystem
myApp.config(function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'Page1.html',
controller: 'Page1Controller'
})
.when('/page2', {
templateUrl: 'Page2.html',
controller: 'Page2Controller'
})
.when('/page3', {
templateUrl: 'Page3.html',
controller: 'Page3Controller'
});
});
Upon opening the app I want to show the Page1.html in the ng-view, so that's sorted with the '/' url thing, I guess.
The problem is, that from every other controller, I want to be able to get back to the Page1.html.
I tried making an event in every other controller, like this:
$scope.NavigateBack = function() {
$location.path('/');
}
It's not working, sadly. I don't get any error messages though... I tried it with different addresses in the path, like "/page2", but nothing worked.
What am I doing wrong, that the view isn't changing and the page isn't navigating?
I recommend use
$window.location = "#/"
but don't forgot to inject $window to your controller
Define behaviour in the Page2Controller, for example:
$scope.goBack = function(){
$location.path("#/");
}
And add some button inside of Page2.html:
<button ng-click="goBack()">Return</button>
You might also need to change your navigation links href attribute to #/page2 and #/page3
I worked through the tutorial on the AngularJS website and I noticed that in at step 7, they change how a controller is introduced into the application. Initially, they use a directive:
<body ng-controller="PhoneListCtrl">
...
</body>
However, it later gets changed to use a controller attribute as part of an ng-route.
$routeProvider.
when('/phones', {
templateUrl: 'partials/phone-list.html',
controller: 'PhoneListCtrl'
}).
/* rest of routes here */
Here's the git diff where the change is made. Is there a difference between these two techniques?
Controller using a ng-controller directive:
A new $scope is created on ng-controller element.
Explicit view-to-controller connection
Visible with inspect element, etc
Controller in a route:
A new $scope is created per route on the ng-view element.
The controller can request dependencies defined in the route resolve.
Optional view-to-controller connection. Recommended to have a naming convention that maps routes to controllers to views.
One of well-known feature of Angularjs is Single-Page Applications.
If you assign ng-controller attribute directly on the page：
<body ng-controller="PhoneListCtrl">
...
</body>
you can't switch controllers easily for other tasks.
So, use route to switch controllers is one of important step in learning Angular Single-Page feature.
You can have same layout and one different element by using route and ng-view directive.
$routeProvider.
when('/phones', {
templateUrl: 'partials/phone-list.html',
controller: 'PhoneListCtrl'
}).
when('/tablets', {
templateUrl: 'partials/tablet-list.html',
controller: 'TabletListCtrl'
}).
If '/phones'
<div ng-view></div>
will include your 'partials/phone-list.html' template
and set 'PhoneListCtrl' as div controller
The same：
If '/tablets'
<div ng-view></div>
will include your 'partials/tablet-list.html' template
and set 'TabletListCtrl' as div controller
This is the difference between two.
ng-view is the cause of the difference. You can't really do this
<div ng-view ng-controller="PhoneListCtrl">
As you'd need to change that controller as the route changed. So basically the router does that for you, and uses the controller you specified when you defined your routes.
You probably can do this:
<div ng-view>
and then in your template:
<div ng-controller="PhoneListCtrl">
and leave out the controller declaration in your routes. Which I suspect would have essentially the same effect, although I've never tried that. Probably better to go with convention here though.
In the 1st case the controller is directly on the page.
Once they change it, that controller is only on the page if the route is /phones otherwise it is some other controller based on some other route.
Yes - the change is this:
if you want to display a specific controller on the page, you can use
<body ng-controller>
BUT
if you want to do routing (application with more than one controller) - you will need to use routing + change the body to:
<body ng-view></body>
Plunker Code Showing Issue Described Below
http://plnkr.co/edit/Bz3Qhf1eDuFrnKI0qnUo?p=preview
I am using two components of the AngularUI suite, UI-Router and UI-Bootstrap.
UI-Router is responsible for loading templates when the user clicks on my top navbar links.
Only the first two links under 'UI Widget Templates' (AngularUI-Bootstrap and Alert) are active
UI-Bootstrap is responsible for making nice widgets within the templates.
I seem to have UI-Router properly configured in that I am loading the proper templates and those templates have access to the correct controller. The problem I am having is that my UI-Bootstrap components are failing to load and generating odd errors which seem to indicate they are somehow attempting to load templates themselves???
What have I mishandled in my implementation that is keeping the Bootstrap-UI directives from loading?
HTML Template for Alert dropdown link
<tabset>
<tab heading="Static title">Static content</tab>
<tab ng-repeat="tab in tabs" heading="{{tab.title}}" active="tab.active" disabled="tab.disabled">
{{tab.content}}
</tab>
<tab select="alertMe()">
<tab-heading>
<i class="icon-bell"></i> Select me for alert!
</tab-heading>
I've got an HTML heading, and a select callback. Pretty cool!
</tab>
</tabset>
{{tabs}}
Error Message from console when Alert template loads
Angular Goodness
angular.module("uiRouterExample", [
'ui.router',
'ui.bootstrap']).config(function ($stateProvider, $urlRouterProvider) {
$stateProvider
.state('home', {
url: '/home',
templateUrl: 'templates/home.html',
controller: 'BSCtrl'
})
.state('angularBS', {
url: '/angularBS',
templateUrl: 'templates/angularBS.html',
controller: 'BSCtrl'
})
.state('alert', {
url: '/alert',
templateUrl: 'templates/alert.html',
controller: 'BSCtrl'
})
;
})
.controller('BSCtrl', function ($scope) {
$scope.tabs = [
{ title:"Accordion", content:"Dynamic content 1" },
{ title:"Alert", content:"Dynamic content 2"},
{title:"Buttons", content:"More Dynamic Content"}
];
$scope.test="Hello World";
$scope.alerts = [
{ type: 'error', msg: 'Oh snap! Change a few things up and try submitting again.' },
{ type: 'success', msg: 'Well done! You successfully read this important alert message.' }
];
$scope.addAlert = function() {
$scope.alerts.push({msg: "Another alert!"});
};
$scope.closeAlert = function(index) {
$scope.alerts.splice(index, 1);
};
});
UI-Bootstrap relies on the presence of templates which are not present in the ui-bootstrap-[version].js file. The build files configuration options are described here. A relevant snippet:
Files with the -tpls in their name have
bootstrap-specific templates bundled with directives. For people who
want to take all the directives and don't need to customize anything
the solution is to grab a file named
ui-bootstrap-tpls-[version].min.js. If, on the other hand default
templates are not what you need you could take
ui-bootstrap-[version].min.js and provide your own templates...
In the plunkr, you are using ui-bootstrap-0.7.0.js, not ui-bootstrap-tpls-0.7.0.js. The former is not bundled with the templates, but still has references to them hard-coded under the directives' templateUrls, for example:
.directive('alert', function() {
return {
...
templateUrl:'template/alert/alert.html',
...
};
}])
Edit, including #inolasco's answer:
If you use ui-bootstrap-tpls.js and still have this issue, it might be that you need to add
'ui.bootstrap.tpls'
to your module.
Adding to the accepted answer, which lead me to solve a similar issue. if you use ui-bootstrap-tpls.js and still have this issue, it might be that you need to add
'ui.bootstrap.tpls'
to your module. That worked for me.
I'm working on two projects right now using AngularJS, and I'm running into the same problem with both of them.
The problem is that I have an index page that looks completely different from any of the inner pages, which means that my ng-view has to consist of the entire page. This makes it so that any time a route changes, the whole page has to reload instead of just the main content area. This causes things like the header or sidebar to flash briefly.
The only good approach I can think of to make my index page separate from my app is to literally have a separate, static index.html and then all my angularJS pages inside a separate folder so that I can use a more focused ng-view.
Is this the only/best approach there is? Has anyone achieved this, or have any ideas on how to? thanks.
A way to solve this problem would be using UI-Router.
For example:
You could have an app.html which is a page that holds all of your application views. In it add a:
<body>
<div ui-view></div>
</body>
and styles/scripts required by the entire application.
All of your views will go there including the index.html view.
Assuming that the pages except the index have some sort of header/body/footer layout in which the body changes according to the actual page you can use a configuration as follows:
var app = angular.module('app', [])
.config(['$stateProvider', function ($stateProvider)
{
$stateProvider
.state('index', {
url: '/index',
templateUrl: 'index.html',
controller: 'IndexController'
})
.state('root', {
templateUrl: 'root.html',
controller: 'RootController'
})
.state('root.somePage', {
url: '/some-page',
templateUrl: 'some-page.html',
controller: 'SomePageController'
})
.state('root.anotherPage', {
url: '/another-page',
templateUrl: 'another-page.html',
controller: 'AnotherPageController'
});
}
The root.html will be like a masterpage in ASP.NET Webforms so it would be in the form:
<!-- header markup here -->
<div ui-view></div>
<!-- footer markup here -->