I have a simple project that uses ui-router with component. For the 'hello' component, nothing happened if I clicked on the 'hello' link; if I clicked on the "About" link, then it showed the view because it doesn't use a component. Can someone please let me know why the 'hello' component is not working? I have tried different version of angular-ui-router.js, but didn't fix the issue. Thanks.
index.html:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.js"></script>
<!--<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.4.2/angular-ui-router.js"></script> -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/1.0.0-rc.1/angular-ui-router.js"></script>
<script src=https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/1.0.0-rc.1/angular-ui-router.min.js"> </script>
<script src="js/hello-component.js"></script>
<script src="js/hellogalaxy-module.js"></script>
<style>.active { color: red; font-weight: bold; }</style>
</head>
<body ng-app="hellogalaxy">
<a ui-sref="hello" ui-sref-active="active">Hello</a>
<a ui-sref="about" ui-sref-active="active">About</a>
<ui-view></ui-view>
</body>
</html>
hellogalaxy-module.js:
var myApp = angular.module('hellogalaxy', ['ui.router']);
myApp.config(function($stateProvider) {
var helloState = {
name: 'hello',
url: '/hello',
component: 'hello'
};
var aboutState = {
name: 'about',
url: '/about',
template: '<h3>Its the UI-Router hello world app!</h3>'
}
$stateProvider.state(helloState);
$stateProvider.state(aboutState);
});
hello-component.js:
angular.module('hellogalaxy').component('hello',
{
template: '<h3>{{$ctrl.greeting}} Solar System!</h3>'
controller: function() { this.greeting = 'hello'}
})
You should load the module first and then the component, change the order as,
<script src="js/hellogalaxy-module.js"></script>
<script src="js/hello-component.js"></script>
Related
I want to allow user to click button "next",then check a condition if it satisfies,then allow user to go to next page otherwise send a message 'you cannot view this page'.how to achieve this using angular 1??
Check out this plunker also check the ui-router docs for more info
https://plnkr.co/edit/j3XVyHTtWex9Dpgr1tF0?p=preview
html
<html>
<head>
<script src="//unpkg.com/angular#1.6.5/angular.js"></script>
<script src="//unpkg.com/#uirouter/angularjs#1.0.5/release/angular-ui-router.js"></script>
<script src="helloworld.js"></script>
<style>.active { color: red; font-weight: bold }</style>
</head>
<body ng-app="helloworld" ng-controller="Ctrl">
<ui-view></ui-view>
</body>
</html>
js
var myApp = angular.module('helloworld', ['ui.router']);
myApp.config(function($stateProvider) {
var step1 = {
name: 'step1',
url: '/step1',
template: `<h3>hello from step 1</h3><button ng-click="move('step2')">step 2</button>`
}
var step2 = {
name: 'step2',
url: '/step2',
template: `<h3>hello from step 2</h3><button ng-click="move('step3')">step 3</button>`
}
var step3 = {
name: 'step3',
url: '/step3',
template: '<h3>hello from step 3</h3>'
}
$stateProvider.state(step1);
$stateProvider.state(step2);
$stateProvider.state(step3);
}).
controller('Ctrl', function($scope, $state) {
$scope.move = function(move) {
//check your condition here
$state.transitionTo(move);
}
$scope.move('step1')
});
edited for comment
I just started AngularJS. When I try to implemt following example, I am getting
404 Not Found
This is my main.html
<!DOCTYPE html>
<html ng-app="demoApp">
<script src="angular.min.js"></script>
<head>
<title>main page</title>
</head>
<body>
<div ng-view></div>
<script>
var demo = angular.module('demoApp',[]);
demo.config(function ($routeProvider){
$routeProvider
.when ('foo',{
controller : 'SimpleController',
templateUrl: 'first.html'
})
});
demo.controller('SimpleController',function($scope){
$scope.customers = [
{name: 'sac',city:'abcd'},
{name: 'mac',city:'efgh'},
{name: 'nalaka',city:'ijkl'}
];
});
</script>
</body>
</html>
My first.html
<ul>
<li ng-repeat="cus in customers ">{{ cus.name }}</li>
</ul>
When I visit localhost/foo I am getting 404 exception. I just started AngularJS. So any help/guide to solve this problem will be a great help for me.
Thanks in advance
You should refer angular-route.min.js file on page & then include ngRoute module in your application.
var demo = angular.module('demoApp',['ngRoute']);
You should correct your .when condition to below
.when('/foo',
As you did't enabled html5mode in your routing, you could access the page via localhost/#/foo URL.
var demo = angular.module('demoApp', ['ngRoute']);
demo.config(function($routeProvider) {
$routeProvider
.when('/foo', {
controller: 'SimpleController',
templateUrl: 'first.html'
})
// By default it will open foo
.otherwise({redirectTo: '/foo'})
});
demo.controller('SimpleController', function($scope) {
$scope.customers = [{
name: 'sac',
city: 'abcd'
},
{
name: 'mac',
city: 'efgh'
},
{
name: 'nalaka',
city: 'ijkl'
}
];
});
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-route.min.js"></script>
<div ng-app="demoApp">
<div ng-view></div>
<script type="text/ng-template" id="first.html">
Content of the template.
</script>
</div>
I'm trying to implement iife and this style to seperate my files in angularjs so I have config.js that will use ui.router that was implemented this way
//config.js
(function (module) {
"use strict";
module.config([
"$stateProvider","$urlRouterProvider","$locationProvider",
function ($stateProvider, $urlRouterProvider,$locationProvider) {
$urlRouterProvider.otherwise("/Views/Profile.html");
$stateProvider
.state("profile", {
url: "/",
templateUrl: "Profile.html",
controller: "profileController as vm"
})
.state("profiledetails", {
url: "ProfileDetails",
templateUrl:"ProfileDetails.html",
controller: "profileController as vm"
})
}
])
})(angular.module("appMain", ["ui.grid","ui.router","profileService"]));
and I have this profile.html which has a link to profiledetail.html
<!DOCTYPE html>
<html ng-app="appMain">
<head>
<title></title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<link href="../Content/ui-grid.css" rel="stylesheet" />
<link href="../Content/bootstrap.min.css" rel="stylesheet" />
</head>
<body class="container-fluid">
<div ng-controller="profileController">
<div id="profileGrid" ui-grid="gridOptions"></div>
</div>
<script src="../scripts/angular.js"></script>
<script src="../scripts/angular-ui-router.js"></script>
<script src="../scripts/angular-resource.js"></script>
<script src="../scripts/ui-grid.min.js"></script>
<script src="../scripts/App/config.js"></script>
<script src="../scripts/App/Profile/profileService.js"></script>
<script src="../scripts/App/Profile/profileController.js"></script>
<script src="../scripts/App/helper.js"></script>
profile details
<div ui-view></div>
</body>
</html>
And this is my profilecontroller.js
(function(module) {
"use strict";
module.controller("profileController", ["$scope", "profileService", profileController]);
function profileController($scope, profileService) {
var vm = this;
var scope = $scope;
vm.profiles = getProfiles;
var onProfiles = [{
firstName: "Juan",
lastName: "Dela Cruz"
}, {
firstName: "Andres",
lastName: "Cruz"
}];
function getProfiles() {
profileService.getProfiles()
.then(onProfiles(result));
};
scope.gridOptions = {
enableSorting: true,
columnDefs: [{
name: "firstName",
field: "firstName"
}, {
name: "lastName",
field: "lastName"
}],
data: onProfiles
};
}
}(angular.module("appMain")));
In running the code and upon click to the link theres an error in chrome saying "Error: Could not resolve 'profiledetails' from state ''". Not sure if my implementation of iife caused this issue. Please someone guide me to the correct path.
You don't need to re-inject the module's dependencies when creating the profileController, and the iife parameter should immediately follow the closing curly bracket, so:
})(angular.module("appMain", ["profileService", "ui.grid","ui.router"]));
can become:
}(angular.module("appMain")));
This way you're retrieving the previously created module, rather than creating a new one. See the Creation versus Retrieval section of the docs for a note on this.
Also onProfiles is an array (not a function), so I think you need to change this:
function getProfiles() {
profileService.getProfiles()
.then(onProfiles(result));
};
To something more like this:
function getProfiles() {
profileService.getProfiles()
.then(function(result){
// do something with the "onProfiles" array here.
});
};
You use the same controller in your profile detail which is profileController
So in your html you should add
profile details
<div ui-view></div>
So that routing to profile detail can process
I'm new to angularjs and I'm using ui-router for this but it throws Error: $injector:modulerr
Module Error in console.
What is the mistake?
I've included the script as well.
var app = angular.module("SearchAPP", ['ngRoute', 'bw.paging', 'ui.router']);
app.config(['$stateProvider',
function($stateProvider) {
var helloState = {
name: 'tab1',
url: '/tab1/',
template: '<h3>hello world!</h3>'
}
var aboutState = {
name: 'tab2',
url: '/tab2',
template: '<h3>hello world!</h3>'
}
$stateProvider.state(helloState);
$stateProvider.state(aboutState);
}
]);
<html>
<head>
</head>
<body ng-app="myApp">
<a ui-sref="hello">Hello</a>
<a ui-sref="about">About</a>
<ui-view></ui-view>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0rc1/angular-route.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-sanitize.js"></script>
<script src="//npmcdn.com/angular-ui-router#0.3.1/release/angular-ui-router.js">
</html>
I'm new to AngularJS. I've following egghead.io I've set up a controller and model to retrieve message from input component and display it. I'm using ui-router.
Here's my index.html
<!DOCTYPE html>
<html ng-app="app">
<head lang="en">
<meta charset="UTF-8">
<title> </title>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.js"></script>
<script src="//angular-ui.github.io/ui-router/release/angular-ui-router.js"></script>
<script src="app.js"></script>
</head>
<body>
<div ui-view=""></div>
</body>
</html>
Here's my app.js
angular.module('app',["ui.router"])
.config([function($stateProvider) {
$stateProvider
.state('index', {
url:"",
templateUrl:"templates/first.html",
controller:"FirstCtr as first"
});
});
.controller("FirstCtr", function FirstCtr() {
var first = this;
first.greeting = "First";
});
Here's my templates/first.html
<input type="text" ng-model="first.greeting"/>
<div ng-class="first.greeting">
{{first.greeting}} {{"World"}}
</div>
After I go to http://localhost:8080, it was blank and throw this error
Please give me some suggestions.
Your state definition should be be declared controller alias in controllerAs option of state, with it you need to remove the semicolon from config block end.
Also you need to inject $stateProvider dependency properly to avoid error.
Code
angular.module('app', ["ui.router"])
//missed `'$stateProvider'` dependency here
.config(['$stateProvider', function($stateProvider) {
$stateProvider
.state('index', {
url: "",
templateUrl: "templates/first.html",
controller: "FirstCtr",
controllerAs: "first"
});
}]) //remove semicolon from here as you are appending app in chain
.controller("FirstCtr", function FirstCtr() {
var first = this;
first.greeting = "First";
});
Working Plunkr