I am writing a angular app.
which contains index page, register page
below written code is of index file.
<html data-ng-app="dreamflow" lang="en">
<head>
<% include ./partials/head %>
</head>
<body>
<div>
<header>
<% include ./partials/header %>
</header>
<div class="ng-animate" ui-view></div>
<footer>
<% include ./partials/footer %>
</footer>
</div>
<!-- library after page load-->
<script type="text/javascript" src="/angular/angular.min.js"></script>
<script type="text/javascript" src="/angular-ui-router/release/angular-ui-router.min.js"></script>
<script type="text/javascript" src="/bootstrap/dist/js/bootstrap.min.js"></script>
<script type="text/javascript" src="/browser/controllers/dreamflow.js"></script>
</body>
</html>
This is the code of home page
<div class="container-fluid">
<div class="row custom-row2">
<h1>MAIN PAGE</h1>
</div>
</div>
this is dreamflow.js
'use-strict'
angular.module('dreamflow', ['ui.router'])
.config(['$urlRouterProvider', '$stateProvider',
function($urlRouterProvider, $stateProvider) {
$urlRouterProvider.otherwise('/');
$stateProvider
.state('home', {
url: '/',
templateUrl: '/browser/views/home.html'
})
.state('register', {
url: '/register',
templateUrl: '/browser/views/register.html',
controller: 'RegisterController'
});
}
])
This is registerCtrl.js
var myApp = angular.module('dreamflow', []);
myApp.controller('RegisterController', ['$scope',
function($scope) {
$scope.title = "Sign Up";
$scope.register = function() {
var user = {
name: $scope.name,
email: $scope.email,
organization: $scope.organization,
username: $scope.username,
password: $scope.password
};
//Register(user);
};
}
]);
When we add the registerCtrl.js script in the index file (just below dreamflow.js) then our ui-view doesn't work.
When we didn't use registerCtrl.js in index file then ui-view works fine but RegisterController shows following error.
Error: error:areq Bad Argument
Argument 'RegisterController' is not
When we add this registerCtrl.js file anywhere before dreamflow.js then also it shows the same error.
I am unable to find what exactly the problem is. i am trying to solve this from past three days but didn't able to resolve this even after going through all issue related to this error or topic.
In registerCtrl.js, the first line actually instantiate your module again.
what you meant was :
var myApp = angular.module('dreamflow');
Also, I don't see a .run() on your module, which mean to me that your app is not running.
Related
Do the newest versions of angular/angular-route 1.6.1 use hashbang by default? Take this piece of code for example, I have to use #! when linking to partials because #/ or #/partial2 does not work. I thought that you'd have to set a hash prefix but it looks like it's defaulting to that behavior:
<!DOCTYPE html>
<html ng-app='myApp'>
<head>
<title></title>
<script src="bower_components/angular/angular.min.js"></script>
<script src="bower_components/angular-route/angular-route.js"</script>
<script>
var myApp = angular.module('myApp', ['ngRoute']);
myApp.config(function ($routeProvider) {
$routeProvider
.when('/',{
templateUrl: 'partials/view1.html',
})
.when('/partial2',{
templateUrl: 'partials/view2.html'
})
.otherwise({
redirectTo: '/'
});
});
myApp.controller('view1Controller', function ($scope) {
$scope.sports = ['golf', 'basketball', 'hockey', 'tennis', 'football'];
});
myApp.controller('view2Controller', function ($scope) {
$scope.message = 'We are using another controller';
});
</script>
</head>
<body>
<div ng-app='myApp'>
Partial 1 | Partial 2
<div ng-view="">
</div>
</div>
</body>
</html>
Starting angular 1.6.0, #!/ becomes defaults in routes. I basically worked down versions until #/ worked, which was 1.5.11.
I just have a problem with angular routes.
I have a singlePage Application with 4 different views.
I'm using the ui.router for $stateProvider.
The main view is on route: https://testsite.com/
If I'm wanted to get to the page like: https://testsite.com/view1 i have an error. It is working if I'm on the main view and then changing the route on a click event like:
$scope.go = function ( path ) {
$location.path( path );
};
, but if i give the absolute url for the browser, it wont work.
Here is my index.html:
<body>
<div ui-view></div>
<script type="text/javascript" src="assets/javascript/libs/angular.min.js"></script>
<script type="text/javascript" src="assets/javascript/libs/angular-route.min.js"></script>
<script type="text/javascript" src="assets/javascript/libs/angular-ui-router.min.js"></script>
<script type="text/javascript" src="assets/javascript/app.js"></script>
</body>
view1:
<div class="first-container">
//some content here
</div>
view2:
<div class="second-conteiner">
//some content here
</div>
and my App.js:
var app = angular.module('SofticApp',['ngRoute', 'ui.router']);
app.config(function($routeProvider,$stateProvider, $urlRouterProvider, $locationProvider){
$locationProvider.html5Mode({
enabled: true,
requireBase: false
}).hashPrefix('!');
$stateProvider
.state( '/', {
url: '/',
templateUrl: 'assets/views/view1.html',
controller: 'viewFirstController'
})
.state( '/view2',{
url: '/view2',
templateUrl: 'assets/views/view2.html',
controller: 'viewSecondController'
});
Thanks for your help!
dont use the absolute url, use the path only
alternatively use
$state.go('view2')
notice that the state name should be 'view2' NOT '/view2'
I am just setting up a simple Angular app as I've done countless times. I added a home state and a separate state for a note taking app, yet neither states are displaying/injecting the html partials into the ui-view. I think it might be an issue with my ui-router setup, but I cannot find the issue. I console log from my controllers and they trigger correctly, so the states are clearly pointing to the right controllers.
Index
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title</title>
<script src="bower_components/angular/angular.js"></script>
<script src="node_modules/angular-ui-router/release/angular-ui-router.js"></script>
<script src="app.js"></script>
<script src="factory.js"></script>
<script src="config.js"></script>
</head>
<body ng-app="myApp">
<ui-view></ui-view>
</body>
</html>
config
app.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('home', {
url: '/home',
templateURL: './home.html',
controller: 'homeCtrl'
})
.state('list', {
url: '/list',
templateURL: '/list.html',
controller: 'listCtrl'
})
$urlRouterProvider.otherwise('/home');
});
app.js
'use strict';
var app = angular.module('myApp', ['ui.router']);
app.controller('listCtrl', function($scope, myFactory) {
console.log("list working!");
$scope.items = myFactory.items
$scope.addItem = function() {
$scope.items.unshift($scope.newItem);
$scope.newItem = "";
}
})
app.controller('homeCtrl', function($scope) {
console.log("home working!");
$scope.test = 'test'
})
My home state should load a partial containing:
<div>
<h1>Welcome!</h1>
</div>
Plunker
http://plnkr.co/edit/ngHYDtx0VBe2YPlBeJ3t?p=preview
It has to be
templateUrl: './home.html',
Also, it is not desirable to use relative paths for templates, './home.html' and 'home.html' will be cached internally as two different templates.
I am fairly new to Angular, and I am trying to do an example with a parameter. The one without the parameter works fine, but the link with the parameter does not work. What am I doing wrong here?
The app and controller:
var myApp = angular.module('myApp', ['ui.router']);
myApp.config(['$routeProvider','$locationProvider', '$httpProvider',
function ($routeProvider, $locationProvider, $httpProvider) {
$locationProvider.hashPrefix('!').html5Mode(true);
$routeProvider
.when('/NewOrder', {
templateUrl: 'templates/NewOrder',
controller: 'AddOrderController'
}).when('/ShowOrders/:orderID', {
templateUrl: function (params) {return '/templates/ShowOrders?orderID=' + params.orderID; },
controller: 'ShowOrdersController'
}).otherwise({
redirectTo: '/ShowOrders'
});
}
]);
myApp.controller('AddOrderController', function ($scope) {
$scope.message = 'This is the add new order controller screen';
});
myApp.controller('ShowOrdersController', function ($scope,$routeParams) {
$scope.message = 'This is the show orders controller';
$scope.order_id = $routeParams.orderID;
});
The Route.config file:
routes.IgnoreRoute("{resource}.axd/{*pathInfo}");
routes.MapRoute(
name: "NewOrder",
url: "templates/NewOrder",
defaults: new { controller = "Templates", action = "AddOrder" });
routes.MapRoute(
name: "ShowOrders",
url: "templates/ShowOrders/{orderID}",
defaults: new { controller = "Templates", action = "ShowOrders", orderID = "" });
routes.MapRoute(
name: "Default",
url: "{controller}/{action}/{id}",
defaults: new { controller = "Home", action = "Index", id = UrlParameter.Optional }
);
routes.MapRoute(
name: "Defaults",
url: "{*url}",
defaults: new { controller = "Home", action = "Index", id = UrlParameter.Optional }
);
The html file:
<!DOCTYPE html>
<html lang="en" ng-app="myApp" ng-strict-di>
<head>
<title>AngularJS Routing example</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-3">
<ul class="nav">
<li> Add New Order </li>
<li> Show Order </li>
</ul>
</div>
<div class="col-md-9">
<div ng-view></div>
</div>
</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.15/angular-ui-router.js"></script>
#*<script src="app.js"></script>*#
<script src="~/Scripts/myApp.js"></script>
</body>
First thing you shouldn't be confuse between angular-router & ui-router, as currently you are using angular-route, thus you should use ngRoute module instead of ui-router
var myApp = angular.module('myApp', ['ngRoute'/*, otherDependencies */]);
You can not have params inside your templateUrl function while using 1.0.7 version of angular, instead you should have used latest version which have added support that you could have $routeParmas in your $routerProvider templateUrl function (Actually angular added this support since 1.1+).
Or if you wanted to stick with the older version for some reason then you could include the $routeParams as dependency in your .config function.
.when('/ShowOrders/:orderID', {
templateUrl: '/templates/ShowOrders?orderID=' + $routeParams.orderID,
controller: 'ShowOrdersController'
})
EDIT note - based on Charlietfl's comment below, this is the wrong answer. Per Stack overflow's preference I won't delete it, because having the wrong content can sometimes help guide users to an answer as well.
You'll have to excuse be because it's been a little over a year since doing angular + MVC4 ... I'm not even sure this deserves to be an "answer" over a comment
BUT
My recollection of angular routes is such that they only happen based on the things that happen AFTER the hash (barring a configuration setting)
Could you take a moment to test the route:
/ShowOrders/123#/ShowOrders/123
and see if anything changes? meantime I'll did through some old code to see if I can recall the nit-pickle-y bits of angular routing.
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 ''