Boas pessoal sou novo por aqui e estou a começar a explorar angularJS ...
estou a tentar usar ngRoute para os links das paginas mas não estou a conseguir tenho o ficheiro de js desta forma :
Código (Javascript):
Ora isto é um menu que esta a funcionar....
depois andei a pesquisar e encontrei um exemplo para fazer o sistema de links entre paginas só que não sei como juntar isto sempre que junto o código deixa tudo de funcionar ....
Código (Javascript):
Alguém pode ajudar a colocar isto junto a que funcione ?
Se estiver a perguntar alguma barbaridade não me levem a mal estou mesmo a começar nisto.
Desde já obrigado
estou a tentar usar ngRoute para os links das paginas mas não estou a conseguir tenho o ficheiro de js desta forma :
Código (Javascript):
var myApp = angular.module('webApp', ['ui.bootstrap']);
myApp.controller('AccordionDemoCtrl', function ($scope) {
$scope.oneAtATime = true;
$scope.groups = [
{
title: 'Dynamic Group Header - 1',
content: 'Dynamic Group Body - 1'
},
{
title: 'Dynamic Group Header - 2',
content: 'Dynamic Group Body - 2'
}
];
$scope.items = ['Item 1', 'Item 2', 'Item 3'];
$scope.addItem = function() {
var newItemNo = $scope.items.length + 1;
$scope.items.push('Item ' + newItemNo);
};
$scope.status = {
isFirstOpen: true,
isFirstDisabled: false
};
});
myApp.controller('AccordionDemoCtrl', function ($scope) {
$scope.oneAtATime = true;
$scope.groups = [
{
title: 'Dynamic Group Header - 1',
content: 'Dynamic Group Body - 1'
},
{
title: 'Dynamic Group Header - 2',
content: 'Dynamic Group Body - 2'
}
];
$scope.items = ['Item 1', 'Item 2', 'Item 3'];
$scope.addItem = function() {
var newItemNo = $scope.items.length + 1;
$scope.items.push('Item ' + newItemNo);
};
$scope.status = {
isFirstOpen: true,
isFirstDisabled: false
};
});
Ora isto é um menu que esta a funcionar....
depois andei a pesquisar e encontrei um exemplo para fazer o sistema de links entre paginas só que não sei como juntar isto sempre que junto o código deixa tudo de funcionar ....
Código (Javascript):
angular.module('webApp', ['ngRoute']).
config(function ($routeProvider) {
$routeProvider.
when('/about', {templateUrl: 'partials/about.html', controller: 'AboutCtrl'}).
when('/experiments', {templateUrl: 'partials/experiments.html', controller: 'ExperimentsCtrl'}).
when('/home', {templateUrl: 'partials/home.html', controller: 'HomeCtrl'}).
otherwise({redirectTo: '/home'});
})
.controller('AboutCtrl', function ($scope, StateService) {
alert("teste");
$scope.title = 'About Page';
$scope.body = 'This is the about page body';
$scope.message = StateService.getMessage();
$scope.updateMessage = function (m) {
StateService.setMessage(m);
};
})
.controller('ExperimentsCtrl', function ($scope, StateService, ExperimentsService) {
$scope.title = 'Experiments Page';
$scope.body = 'This is the about experiments body';
$scope.message = StateService.getMessage();
$scope.experiments = ExperimentsService.getExperiments();
$scope.updateMessage = function (m) {
StateService.setMessage(m);
};
})
.controller('HomeCtrl', function ($scope, StateService) {
$scope.title = 'Home Page';
$scope.body = 'This is the about home body';
$scope.message = StateService.getMessage();
$scope.updateMessage = function (m) {
StateService.setMessage(m);
};
})
.factory('StateService', function () {
var message = 'Hello Message';
var getMessage = function () {
return message;
};
var setMessage = function (m) {
message = m;
};
return {
getMessage: getMessage,
setMessage: setMessage
}
})
.service('ExperimentsService', function () {
var service = this,
experiments = [
{name: 'Experiment 1', description: 'This is an experiment', completed:0},
{name: 'Experiment 2', description: 'This is an experiment', completed:0},
{name: 'Experiment 3', description: 'This is an experiment', completed:0},
{name: 'Experiment 4', description: 'This is an experiment', completed:0}
];
service.getExperiments = function() {
return experiments;
};
})
.directive('experiment', function(){
var linker = function (scope, element, attrs) {
element.on('click', function(){
scope.doExperiment();
})
};
var controller = function($scope){
$scope.doExperiment = function() {
$scope.$apply(function(){
$scope.experiment.completed++;
});
};
};
return {
scope: true,
restrict: 'E',
template: '<div class="experiment">' +
'<h3>{{experiment.name}}</h3>' +
'<p>{{experiment.description}}</p>' +
'<p><strong>{{experiment.completed}}</strong></p>' +
'</div>',
link: linker,
controller: controller
}
});
config(function ($routeProvider) {
$routeProvider.
when('/about', {templateUrl: 'partials/about.html', controller: 'AboutCtrl'}).
when('/experiments', {templateUrl: 'partials/experiments.html', controller: 'ExperimentsCtrl'}).
when('/home', {templateUrl: 'partials/home.html', controller: 'HomeCtrl'}).
otherwise({redirectTo: '/home'});
})
.controller('AboutCtrl', function ($scope, StateService) {
alert("teste");
$scope.title = 'About Page';
$scope.body = 'This is the about page body';
$scope.message = StateService.getMessage();
$scope.updateMessage = function (m) {
StateService.setMessage(m);
};
})
.controller('ExperimentsCtrl', function ($scope, StateService, ExperimentsService) {
$scope.title = 'Experiments Page';
$scope.body = 'This is the about experiments body';
$scope.message = StateService.getMessage();
$scope.experiments = ExperimentsService.getExperiments();
$scope.updateMessage = function (m) {
StateService.setMessage(m);
};
})
.controller('HomeCtrl', function ($scope, StateService) {
$scope.title = 'Home Page';
$scope.body = 'This is the about home body';
$scope.message = StateService.getMessage();
$scope.updateMessage = function (m) {
StateService.setMessage(m);
};
})
.factory('StateService', function () {
var message = 'Hello Message';
var getMessage = function () {
return message;
};
var setMessage = function (m) {
message = m;
};
return {
getMessage: getMessage,
setMessage: setMessage
}
})
.service('ExperimentsService', function () {
var service = this,
experiments = [
{name: 'Experiment 1', description: 'This is an experiment', completed:0},
{name: 'Experiment 2', description: 'This is an experiment', completed:0},
{name: 'Experiment 3', description: 'This is an experiment', completed:0},
{name: 'Experiment 4', description: 'This is an experiment', completed:0}
];
service.getExperiments = function() {
return experiments;
};
})
.directive('experiment', function(){
var linker = function (scope, element, attrs) {
element.on('click', function(){
scope.doExperiment();
})
};
var controller = function($scope){
$scope.doExperiment = function() {
$scope.$apply(function(){
$scope.experiment.completed++;
});
};
};
return {
scope: true,
restrict: 'E',
template: '<div class="experiment">' +
'<h3>{{experiment.name}}</h3>' +
'<p>{{experiment.description}}</p>' +
'<p><strong>{{experiment.completed}}</strong></p>' +
'</div>',
link: linker,
controller: controller
}
});
Alguém pode ajudar a colocar isto junto a que funcione ?
Se estiver a perguntar alguma barbaridade não me levem a mal estou mesmo a começar nisto.
Desde já obrigado