I am trying to create a custom controller in Ember.js, and am having some trouble trying to make this work. Here is my app.js code:
App = Ember.Application.create();
App.LoginController = Ember.Controller.extend({
actions: {
alert: function() {
alert('yo');
}
}
});
App.LoginManagerView = Ember.View.extend({
templateName: 'login/manager',
})
App.LoginManagerController = Ember.Controller.extend({
needs: ['loginController'],
})
App.Router.map(function() {
this.route("root", {path: "/"});
this.resource("login", function() {
this.route("user");
this.route("manager");
})
});
And here is my html code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Ember Starter Kit</title>
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<script type="text/x-handlebars">
<div class="navbar">
<div class="navbar-inner">
{{#link-to 'root'}}Home{{/link-to}}
{{#link-to 'login.user'}}User{{/link-to}}
{{#link-to 'login.manager'}}Manager{{/link-to}}
</div>
</div>
{{outlet}}
</script>
<script type="text/x-handlebars" id="root">
<h1>Home</h1>
</script>
<script type="text/x-handlebars" id="login/user">
<h1>User</h1>
</script>
<script type="text/x-handlebars" id="login/manager">
<h1>Manager</h1>
<p>
Name: {{controller}}
</p>
<button {{action controllers.loginController.alert}}>Alert</button>
</script>
<script src="js/libs/jquery-1.10.2.js"></script>
<script src="js/libs/handlebars-1.1.2.js"></script>
<script src="js/libs/ember-1.4.0.js"></script>
<script src="js/app.js"></script>
</body>
When I click User I can see the user view, but when I click manager I cant see the manager view. In fact, it seems its not even creating the Manager route. If I remove these lines:
App.LoginManagerController = Ember.Controller.extend({
needs: ['loginController'],
})
it works, but I lose access to the login controller instance.
EDIT:
When I look at the Ember console and I cant see the routes, if I go back to js console I get this message:
needs [ controller:loginController ] but it could not be found
How can I make it find the loginController instance?
Related
Hi I am developing Angularjs Application. I am using UI Router. This is my First Angular project and I am facing issues. I am running Index page. Index page contains header and footer. In body i am trying to bind views on page load.
Below is my Index.html
<html ng-app="RoslpApp">
<head>
<!--Angularjs and ui routing-->
<script data-require="angular.js#1.4.5" data-semver="1.4.5" src="https://code.angularjs.org/1.4.5/angular.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.8/angular-ui-router.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.4.2/angular-ui-router.min.js"></script>
<!--Angularjs and ui routing-->
<!--Arebic Translation-->
<script data-require="angular-translate#*" data-semver="2.5.0" src="https://cdn.rawgit.com/angular-translate/bower-angular-translate/2.5.0/angular-translate.js"></script>
<script src="scripts/angular-translate.js"></script>
<script src="scripts/angular-translate-loader-partial.min.js"></script>
<!--Arebic Translation-->
<!--Date Picker-->
<link href="App/CSS/angular-datepicker.css" rel="stylesheet" />
<script src="App/JS/angular-datepicker.js"></script>
<!--Date Picker-->
<!--Toaster-->
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i" rel="stylesheet">
<script src="https://unpkg.com/angular-toastr/dist/angular-toastr.tpls.js"></script>
<link rel="stylesheet" href="https://unpkg.com/angular-toastr/dist/angular-toastr.css" />
<!--Toaster-->
<!--SPA Files-->
<script src="App/App.js"></script>
<!--SPA Files-->
</head>
<body ng-controller="RoslpAppController">
<header>
<div class="logo"><img src="App/images/logo.png"></div>
</header>
<!--inject here-->
<div class="container">
<div ui-view></div>
</div>
<footer>
</footer>
This is my App.js
var app = angular.module('RoslpApp', ['pascalprecht.translate', 'ui.router', 'toastr', '720kb.datepicker']);
app.config(function ($stateProvider, $urlRouterProvider, $translateProvider, $translatePartialLoaderProvider)
{
$urlRouterProvider.otherwise('/HomePage');
$stateProvider
.state('ForgotPassword.ChangePasswords', {
url: '/ForgotPasswordChangePasswords',
templateUrl: 'ForgotPassword/ChangePassword.html',
params: {
LoginID: null
},
controller: 'ChangePasswords'
})
.state('HomePage', {
url: "/HomePage",
templateUrl: "Registration/HomePage.html"
});
});
app.controller('RoslpAppController', ['$scope', '$translate', 'toastr', function ($scope, $translate, toastr) {
//toastr.success('Hello world!', 'Toastr fun!');
$scope.clickHandler = function (key) {
$translate.use(key);
};
}]);
This is my HomePage.html
<div class="banner-container">
</div>
When i load my page first time, I am getting below error.
Uncaught Error: [$injector:nomod] Module 'RoslpApp' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.
May I know why I am facing below mentioned issues. Thanks in advance.
There are no references in the index.html for pascalprecht.translate ,ui.router, 'toastr', '720kb.datepicker'
Add the necessary references. And the references to your app.js also missing!
You need to add your js script in your html
<html ng-app="RoslpApp">
<head>
</head>
<body ng-controller="RoslpAppController">
<header>
<div class="logo"><img src="App/images/logo.png"></div>
</header>
<!--inject here-->
<div class="container">
<div ui-view></div>
</div>
<footer>
</footer>
<script src="app.js"></script>
<script src="my_other_js.js"></script>
</body>
</html>
I have a small ngRoute example I am trying that to use multiple applications and controllers with. The first app/controller is for the main page, while the second set of app/controller is for the html that ngRoute loads up after pressing a button. However, it doesn't seem to be working. Code below:
Main Module
var app = angular.module("MainModule", ["ngRoute"]);
Main Controller
app.controller("MainController", function ($scope) {
});
app.config(function ($routeProvider) {
$routeProvider
.when('/customers', {
templateUrl: "customers.html",
controller: "CustomerController"
})
});
Customer Module
var CustomerModule = angular.module("CustomerModule", []);
Customer Controller
CustomerModule.controller("CustomerController", function ($scope) {
$scope.Test = "Hey";
$scope.CustomerArray = [
{ "firstName" : "John", "lastName" : "Williams", "Occupation" : "Fireman" },
{ "firstName" : "Louis", "lastName" : "Abrams", "Occupation" : "Policeman" }
]
});
index.html
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.js"></script>
<script src="scripts/MainModule.js"></script>
<script src="scripts/MainController.js"></script>
<link rel="stylesheet" type="text/css" href="MyCSS.css">
</head>
<body>
<div ng-app="MainModule">
<div id="TopDiv">Main Module</div>
<input type="button" value="Load Customers" />
<div ng-view></div>
</div>
</body>
</html>
customers.html
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="scripts/CustomerModule.js"></script>
<script src="scripts/CustomerController.js"></script>
</head>
<body>
<div ng-app="CustomerModule" ng-controller="CustomerController">
{{Test}}
<ul>
<li ng-repeat="x in CustomerArray">{{x.firstName x.lastName x.Occupation}}</li>
</ul>
</div>
</body>
</html>
Long bits of code there, but hopefully simple code. The output when I press the "Load Customer" button is literally {{Test}} with no array data to follow.
I am just now learning angular, so any help with this issue I would appreciate. I am just doing this for fun, to try to learn. So I suppose the issue is not pressing. :) Thanks!
I wrote out a working example using the code from the question as a base. There are quite a few adjustments that were made, so I will list each piece with a bit of explanation.
It is not necessary for each "page" to have it's own module. However, it is not a bad practice. To support the design you have here of one module for each view, I made the following changes:
Include the CustomerModule as a dependency in the MainModule (MainModule.js):
var app = angular.module("MainModule", ["ngRoute", "CustomerModule"]);
Load ALL scripts in the index.html:
<script src="scripts/MainModule.js"></script>
<script src="scripts/MainController.js"></script>
<script src="scripts/CustomerModule.js"></script>
<script src="scripts/CustomerController.js"></script>
With these changes, the $routeProvider is able to locate the CustomerController and instantiate it during a route change. The customers.html now does not have to create a controller, and can be stripped down to a complete partial. Also, the expression used in customers.html needed to be changed, and broken down into individual expressions for each property.
The final customers.html:
{{Test}}
<ul>
<li ng-repeat="x in CustomerArray">{{x.firstName}} {{x.lastName}} {{x.Occupation}}</li>
</ul>
Complete working sample on plnkr.co: http://plnkr.co/edit/EjwW9Fsc2DPhBejUETwB?p=preview
I'm not sure, but the problem is in your MainModule. It should be like this or so:
var app = angular.module("MainModule", ["ngRoute"]);
When you calling angular.module with only one parameter - it's only trying get module, not create.
And customers.html should only contains parts of you html, not full:
Full customers.html
{{Test}}
<ul>
<li ng-repeat="x in CustomerArray">{{ x.firstName }} {{ x.lastName }} {{ x.Occupation }}</li>
</ul>
And add move customer js files to index.html:
<script src="scripts/MainModule.js"></script>
<script src="scripts/MainController.js"></script>
<script src="scripts/CustomerModule.js"></script>
<script src="scripts/CustomerController.js"></script>
<link rel="stylesheet" type="text/css" href="MyCSS.css">
Hope, it helps.
I just want to test opening a left modal with the help of ngAside used at the following Repository:
https://github.com/dbtek/angular-aside
I think I am doing it right, still can find a js error. Can someone help?
index.html:
<html>
<head>
<!-- Required CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css"/>
<!-- Required Scripts -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/1.1.2/ui-bootstrap-tpls.min.js"></script>
<script src="../js/angular-aside.min.js"></script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<input type="text" ng-model="name"/>
{{name}}
<script>
//module declaration
var app = angular.module('myApp',['ui.bootstrap', 'ngAside']);
//Controller declaration
app.controller('myCtrl',function($scope){
$scope.name = "Peter";
var asideInstance = $aside.open({
templateUrl: 'aside.html',
controller: 'AsideCtrl',
placement: 'left',
size: 'lg'
});
});
app.controller('AsideCtrl',function($scope){
});
</script>
</body>
</html>
aside.html
Hello World!
ERROR:
To use the aside service, you have to inject it like this (notice the $aside injection in the constructor) :
app.controller('myCtrl',function($scope, $aside){
...
});
I am a beginner in AngularJS. I have used simple routing to change specific part of data this case is working fine and in this case I want to change whole page data without refreshing page. Here a last li name Change Full Page I want on click third li whole page data should be change without refreshing the page.
routing.html:
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
</head>
<body ng-app="sampleApp">
<ul class="nav">
<li> Add New Student </li>
<li> Show Student </li>
<li> Change Full Page </li>
</ul>
<div ng-view></div>
</body>
<script type="text/javascript">
var sampleApp = angular.module('sampleApp', []);
sampleApp.config(['$routeProvider',
function($routeProvider){
$routeProvider
.when('/AddNewStudent',{
templateUrl : 'addnewstudents.html',
controller : 'AddNewStudentController'
})
.when('/ShowStudents',{
templateUrl : 'showStudents.html',
controller : 'showStudentsController'
})
.when('/changepage',{
templateUrl : 'changepage.html',
controller : 'changepageController'
})
.otherwise({
redirectTo: '/AddNewStudent'
});
}]);
sampleApp.controller('AddNewStudentController',function($scope){
$scope.message = "Please Add New Student ";
});
sampleApp.controller('showStudentsController',function($scope){
$scope.message1 = 'Show All Students';
});
sampleApp.controller('changepageController',function($scope){
$scope.message2 = 'Change Whole Page';
});
</script>
</html>
addnewstudents.html:
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
</head>
<body>
{{message}}
</body>
</html>
showStudents.html:
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
</head>
<body>
{{message1}}
</body>
</html>
changepage.html:
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
</head>
<body>
{{message2}}
</body>
</html>
You cannot change the whole page using angularjs route. The angular js $routeProvider only target the ng-view placeholder, and replace the content (innerHtml) of ng-view div with the once coming back from templateUrl define in route config.
Therefore your templateUrl should return only partial view only. Means it should not contain tag. Also the angular reference is already loaded in parent view so ne need to load it in each partial view.
Sample addnewstudents.html --
<h2>Add Student<h2>
{{message}}
I have theses codes:
app.js (routers):
(function(){
var pizzasApp = angular.module('pizzasApp',['ngRoute','app']);
//here is declared the routers
pizzasApp.config(['$routeProvider', function($routeProvider){
$routeProvider.
when('/pizzas',{
templateUrl: 'pizza-list.html',
controller: 'PizzasController'
}).
when('/',{
redirectTo:'/pizzas'
}).
when('/pizzas/:pizzaId',{
templateUrl: 'pizza-detail.html',
controller: 'PizzasDetailController'
}).
otherwise({
redirecTo: '/pizzas'
});
}]);
})();
configure.js (controllers):
(function(){
var app = angular.module('app',[]);
//In this controller is got all pizzas from JSON file and post new pizzas
app.controller('PizzasController',['$scope','$http',function($scope,$http){
$http.get('http://162.250.78.47/api/pizzas').success(function(data){
$scope.pizzas = data;
});
//WHEN CLICK THE BUTTON FORM FROM pizza-list.html THIS ADD NEW PIZZA. BUT THIS DOESN'T WORK
$scope.save = function(){
$http.post('http://162.250.78.47/api/pizzas',$scope.pizzas).then(function(data){
$location.path('/pizzas');
});
};
}]);
//In this controller I get a selected pizza with ingredients
app.controller('PizzasDetailController',['$scope','$http','$routeParams',function($scope,$http,$routeParams){
$scope.pizzaId = $routeParams.pizzaId;
$http.get('http://162.250.78.47/api/pizzas/'+$scope.pizzaId).success(function(data){
$scope.pizza = data;
});
$http.get('http://162.250.78.47/api/ingredients').success(function(ingr){
$scope.ingrs = ingr;
});
}])
})();
index.html (home):
<!DOCTYPE html>
<html lang="en" ng-app="pizzasApp">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="bootstrap-3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="bootstrap-3.2.0/css/bootstrap-theme.min.css">
<script type="text/javascript" src="jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="bootstrap-3.2.0/js/bootstrap.min.js"></script>
<script type="text/javascript" src="angular.min.js"></script>
<script type="text/javascript" src="angular-route.min.js"></script>
<script type="text/javascript" src="app.js"></script>
<script type="text/javascript" src="configure.js"></script>
<title>New Web Project</title>
</head>
<body>
<div ng-view></div>
</body>
</html>
pizza-list.html (pizza list and form to add new pizza):
<div ng-repeat="nombre in pizzas">
<p>{{nombre.name}}</p>
</div>
<!-- HERE IS THE PROBLEM -->
<form>
<label>Write the pizza name that you want add:</label></br>
<input type="text" ng-model="pizzas.name" placeholder="Pizza">
<button ng-click="save()">Add</button>
</form>
pizza-detail.html (pizza with ingredients):
<div>
<p>{{pizza.name}}</p>
<div ng-repeat="ing in pizza.ingredients track by $index">
<div ng-repeat="ingr in ingrs">
<div ng-if="ing == ingr._id">
{{ingr.name}}
</div>
</div>
</div>
</div>
My problem is that when I want to add a new pizza in the pizza-list.html form, it doesn't work.
Before in click 'Add' new Pizza:
After in click 'Add' new Pizza:
This error is translate to English like:
Blocked request from various sources: the same origin policy prevents read http://162.250.78.47/api/pizzas remote resource. This can be fixed by moving the action to the same domain or activating CORS.
The error has already answered your question(which you never asked). You are trying to submit data to a different host, other than your angular application is running.
In layman terms: you are running your application at localhost, but supplying data to 162.150.78.47. This is not allowed due to security restrictions.
Possible solutions:
1) Host everything on same domain(eg localhost)
2) Enable CORS on API side. I don't know what technology you use, but in C# you have to add [EnableCors] to your controller, which allows cross requesting.
3) Look into JSONP.