Возможен ли AngularJS, без роутинга?

Question

[Алексей Белов]

Возможно ли реализовать простое приложение с одним контроллером, без ui.router и тд, есть api и контроллер который по нему работает, но сейчас он использует ui.router для этого

angular.module('Monorythm')
    .config(['$stateProvider',function ($stateProvider) {
        $stateProvider
            .state('catalog',{
                url: '/catalog',
                templateUrl: 'views/catalog.tmpl.html',
                controller: 'CatalogController'
            })
            .state('catalog.template',{
                url: '/tempflate/:templateId',
                templateUrl: 'views/catalog.template.tmpl.html',
                controller: 'TemplateController',
                needAuth:false,
                isCalculation: true
            });
    }])

Answer 1

[Demian Smith]

Да, возможно.

1. Создаёте компонент angular.module('Monorythm').component('monorythm', {})
Вот документация по компонентам https://docs.angularjs.org/guide/component

2. На html странице указываете место, где будет рендериться компонент

3. Затем бутстрепите прилажение angular.bootstrap(document.body, ['Monorythm']);

Вуаля.

Набрасал для вас пример
https://jsfiddle.net/sneas/gtrwzsn1/525/

а вот этот нашел в интернете при помощи поисковой системы Гугл
https://jsfiddle.net/langdonx/gtrwzsn1/

Comments

[Алексей Белов]

А как реализовать в этом приложении, там много зависимостей, настроек, BaseApiUrl и тд, будет ли это взаимодействовать если я создам один компонент?
https://github.com/Alenorze/MoNg

[Demian Smith]

Алексей Белов, по идеи вы можете убрать из кода настройки роутера

.config(['$stateProvider',function ($stateProvider) {
$stateProvider
.state('catalog',{
url: '/catalog',
templateUrl: 'views/catalog.tmpl.html',
controller: 'CatalogController'
})
.state('catalog.template',{
url: '/template/:templateId',
templateUrl: 'views/catalog.template.tmpl.html',
controller: 'TemplateController',
needAuth:false,
isCalculation: true
});
}])

поубирать ng- трибуты из body

убрать

.run(function($log) {
$log.debug("Monorytm + ngMaterial running...")
});

и написать

angular.bootstrap(document.body, ['Monorythm'])

сразу после angular.module('Monorythm', ['ngMaterial','ngSanitize','ngMessages','ui.router','ngAnimate','cgBusy','ngCookies']);

и по идеи будет работать. При условии что есть компонент monorythm и он добавлен в body.

Этот компонент будет точкой входа в ваше приложение и внутри компонента рисуете другие компоненты и директивы и делаете как угодно сложно.

[Алексей Белов]

Demian Smith, Заработало

[Demian Smith]

Алексей Белов, красава!